/* Multi-Agent Team Dashboard — dark purple/navy analytics theme */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0d0c1d; --surface: #13111e; --surface2: #1a1829; --surface3: #201e30; --border: #2a2840; --border2: #332f50; --text: #e8e6f0; --text-muted: #7b7899; --text-dim: #4d4a6a; --pink: #e91e8c; --pink-dim: rgba(233,30,140,0.15); --pink-glow: rgba(233,30,140,0.35); --purple: #7c3aed; --purple-dim: rgba(124,58,237,0.15); --blue: #3b82f6; --blue-dim: rgba(59,130,246,0.15); --cyan: #06b6d4; --cyan-dim: rgba(6,182,212,0.15); --green: #22c55e; --green-dim: rgba(34,197,94,0.15); --yellow: #eab308; --yellow-dim: rgba(234,179,8,0.15); --orange: #f97316; --orange-dim: rgba(249,115,22,0.15); --red: #ef4444; --red-dim: rgba(239,68,68,0.15); --accent: var(--pink); --sidebar-w: 200px; --sidebar-w-collapsed: 64px; --radius: 14px; --radius-sm: 8px; } /* ── Light theme overrides ── */ [data-theme="light"] { --bg: #f5f3ee; --surface: #ffffff; --surface2: #f0ede6; --surface3: #e8e4da; --border: #d6d0c4; --border2: #c4bdb0; --text: #2c2a35; --text-muted: #6b6670; --text-dim: #9e99a8; --pink: #c0166e; --pink-dim: rgba(192,22,110,0.12); --pink-glow: rgba(192,22,110,0.25); --purple: #6920b0; --purple-dim: rgba(105,32,176,0.12); --blue: #1565c0; --blue-dim: rgba(21,101,192,0.12); --cyan: #006064; --cyan-dim: rgba(0,96,100,0.12); --green: #2e7d32; --green-dim: rgba(46,125,50,0.12); --yellow: #f57f17; --yellow-dim: rgba(245,127,23,0.12); --orange: #e65100; --orange-dim: rgba(230,81,0,0.12); --red: #c62828; --red-dim: rgba(198,40,40,0.12); color-scheme: light; } [data-theme="light"] code, [data-theme="light"] pre { background: var(--surface2); color: var(--text); } [data-theme="light"] input[type="time"], [data-theme="light"] input[type="date"] { color-scheme: light; } html, body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif; font-size: 13px; height: 100%; overflow: hidden; } /* ── Shell: sidebar + content ── */ .shell { display: flex; height: 100vh; overflow: hidden; } /* ── Sidebar (collapsible, 200px expanded / 64px collapsed) ── */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 14px 0 16px; z-index: 20; transition: width 0.22s cubic-bezier(0.4,0,0.2,1); overflow: hidden; } /* Applied immediately from script to avoid flash */ .sidebar-collapsed-init .sidebar { width: var(--sidebar-w-collapsed) !important; } /* ── Sidebar header ── */ .sidebar-header { display: flex; align-items: center; gap: 10px; padding: 0 12px 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; flex-shrink: 0; min-width: 0; } .sidebar-logo { width: 36px; height: 36px; flex-shrink: 0; background: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .sidebar-app-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity 0.15s; } .sidebar-toggle { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: 7px; color: var(--text-dim); cursor: pointer; transition: background 0.15s, color 0.15s; } .sidebar-toggle:hover { background: var(--surface2); color: var(--text); } .toggle-icon-expand { display: none; } .toggle-icon-collapse{ display: block; } /* ── Primary nav ── */ .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; flex: 1; } /* ── Bottom section ── */ .sidebar-bottom { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; border-top: 1px solid var(--border); padding-top: 8px; } /* ── Nav links (shared) ── */ .sidebar-link { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; transition: background 0.15s, color 0.15s; min-width: 0; } .sidebar-link:hover { background: var(--surface2); color: var(--text); } .sidebar-link.active { background: var(--pink-dim); color: var(--pink); } .sidebar-link.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; background: var(--pink); border-radius: 0 3px 3px 0; } .nav-icon { flex-shrink: 0; } .sidebar-label { opacity: 1; transition: opacity 0.15s; overflow: hidden; text-overflow: ellipsis; } /* Tooltip shown only when collapsed */ .sidebar-link::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--surface3); border: 1px solid var(--border2); color: var(--text); font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 100; } /* ── Footer (uptime + tenant) ── */ .sidebar-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 10px 4px; overflow: hidden; } .sidebar-uptime-wrap { display: flex; align-items: baseline; gap: 6px; } .sidebar-uptime-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); white-space: nowrap; } .sidebar-uptime { font-size: 12px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; white-space: nowrap; } .sidebar-tenant { font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; opacity: 1; transition: opacity 0.15s; } .sidebar-user { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .sidebar-user-name { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .sidebar-logout { font-size: 14px; color: var(--text-dim); text-decoration: none; flex-shrink: 0; opacity: 0.7; transition: opacity 0.15s; cursor: pointer; } .sidebar-logout:hover { opacity: 1; color: var(--red); } /* ── Collapsed state ── */ .sidebar.collapsed { width: var(--sidebar-w-collapsed); } /* Stack header vertically so toggle button stays visible when narrow */ .sidebar.collapsed .sidebar-header { flex-direction: column; align-items: center; padding: 0 0 12px; gap: 6px; } .sidebar.collapsed .sidebar-app-name, .sidebar.collapsed .sidebar-label, .sidebar.collapsed .sidebar-tenant { opacity: 0; pointer-events: none; } .sidebar.collapsed .toggle-icon-collapse { display: none; } .sidebar.collapsed .toggle-icon-expand { display: block; } .sidebar.collapsed .sidebar-link:hover::after { opacity: 1; } .sidebar.collapsed .sidebar-footer { align-items: center; padding: 10px 0 4px; } .sidebar.collapsed .sidebar-uptime-label { display: none; } /* ── Main content area ── */ .content { flex: 1; overflow-y: auto; min-width: 0; background: var(--bg); } /* ── Page header ── */ .page-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 4px; } .page-title { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; } .page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .page-meta { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; } .refresh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Saved banner ── */ .banner { background: rgba(34,197,94,0.1); border-bottom: 1px solid rgba(34,197,94,0.3); color: var(--green); padding: 8px 24px; font-size: 13px; } /* ── Stats summary row ── */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px 24px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; transition: border-color 0.2s, transform 0.15s; } .stat-card:hover { border-color: var(--border2); transform: translateY(-1px); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .stat-card.pink::before { background: linear-gradient(90deg, var(--pink), var(--purple)); } .stat-card.blue::before { background: linear-gradient(90deg, var(--blue), var(--cyan)); } .stat-card.green::before { background: var(--green); } .stat-card.yellow::before { background: linear-gradient(90deg, var(--yellow), var(--orange)); } .stat-card-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 10px; } .stat-card-value { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -1px; margin-bottom: 6px; } .stat-card.pink .stat-card-value { color: var(--pink); } .stat-card.blue .stat-card-value { color: var(--blue); } .stat-card.green .stat-card-value { color: var(--green); } .stat-card.yellow .stat-card-value { color: var(--yellow); } .stat-card-sub { font-size: 11px; color: var(--text-muted); } /* ── Agent cards row ── */ .agents-row { display: flex; gap: 12px; padding: 0 24px 16px; flex-wrap: wrap; } .agent-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; min-width: 200px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s, transform 0.15s; position: relative; overflow: hidden; } .agent-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--pink), var(--purple)); opacity: 0; transition: opacity 0.2s; } .agent-card:hover { border-color: var(--border2); transform: translateY(-2px); } .agent-card:hover::before { opacity: 1; } .agent-card.disabled { opacity: 0.4; } .agent-card-header { display: flex; align-items: center; gap: 12px; } .agent-avatar { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .agent-avatar.pink { background: var(--pink-dim); } .agent-avatar.blue { background: var(--blue-dim); } .agent-avatar.green { background: var(--green-dim); } .agent-avatar.purple { background: var(--purple-dim); } .agent-avatar.cyan { background: var(--cyan-dim); } .agent-avatar.orange { background: var(--orange-dim); } .agent-card-name { font-weight: 600; font-size: 14px; line-height: 1.2; } .agent-card-desc { color: var(--text-muted); font-size: 11px; line-height: 1.5; } .agent-card-footer { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-dot.active { background: var(--green); box-shadow: 0 0 6px var(--green); } .status-dot.inactive { background: var(--text-dim); } .status-dot.disabled { background: var(--border); } .status-dot.after-hours { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); } .badge-247 { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 700; background: rgba(124, 58, 237, 0.15); color: #a78bfa; border: 1px solid rgba(124, 58, 237, 0.3); vertical-align: middle; } .agent-last-active { color: var(--text-muted); font-size: 11px; } .badge-enabled { background: var(--green-dim); color: var(--green); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 500; } .badge-disabled { background: var(--red-dim); color: var(--red); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 500; } .badge-missing { background: var(--yellow-dim); color: var(--yellow); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 500; } /* ── Grid ── */ .grid { display: grid; grid-template-columns: 2fr 3fr; gap: 14px; padding: 0 24px 24px; } .grid-full { grid-column: 1 / -1; } /* ── Panel card ── */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.2s; } .panel:hover { border-color: var(--border2); } .panel-header { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; display: flex; align-items: center; gap: 8px; } .panel-header .count { background: var(--surface2); color: var(--text); border-radius: 20px; padding: 2px 8px; font-size: 11px; font-weight: 600; } .panel-header .panel-accent { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .panel-accent.pink { background: var(--pink); box-shadow: 0 0 6px var(--pink-glow); } .panel-accent.blue { background: var(--blue); } .panel-accent.green { background: var(--green); } .panel-accent.yellow { background: var(--yellow); } .panel-accent.purple { background: var(--purple); } .panel-accent.cyan { background: var(--cyan); } .panel-body { flex: 1; overflow-y: auto; max-height: 280px; } .empty { color: var(--text-muted); padding: 32px 24px; text-align: center; font-size: 12px; line-height: 1.8; } .empty-icon { font-size: 24px; margin-bottom: 8px; opacity: 0.4; } /* ── Tables ── */ table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 8px 14px; color: var(--text-dim); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; } td { padding: 8px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 12px; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--surface2); } /* ── Severity badges ── */ .sev-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; } .sev-badge.critical { background: var(--red-dim); color: var(--red); } .sev-badge.high { background: var(--orange-dim); color: var(--orange); } .sev-badge.medium { background: var(--yellow-dim); color: var(--yellow); } .sev-badge.low { background: var(--green-dim); color: var(--green); } /* Keep old class names for template compatibility */ .critical { color: var(--red); font-weight: 600; } .high { color: var(--orange); } .medium { color: var(--yellow); } .low { color: var(--green); } /* ── Score chip ── */ .score-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; min-width: 28px; text-align: center; } .score-chip.critical { background: var(--red-dim); color: var(--red); } .score-chip.high { background: var(--orange-dim); color: var(--orange); } .score-chip.medium { background: var(--yellow-dim); color: var(--yellow); } .score-chip.low { background: var(--green-dim); color: var(--green); } /* ── Platform badges ── */ .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; } .badge-monday { background: var(--blue-dim); color: var(--blue); } .badge-clickup { background: var(--purple-dim); color: var(--purple); } .badge-both { background: var(--cyan-dim); color: var(--cyan); } /* ── Activity level ── */ .level-info { color: var(--blue); } .level-warning { color: var(--yellow); } .level-error { color: var(--red); } .level-debug { color: var(--text-dim); } /* ── Agent colour chips ── */ .agent-pm { color: var(--blue); } .agent-risk { color: var(--pink); } .agent-report { color: var(--green); } /* ── Settings tabs ── */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 24px; } .tab-btn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; padding: 12px 20px; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--pink); border-bottom-color: var(--pink); } .tab-content { display: none; } .tab-content.active { display: block; } /* ── Settings page ── */ .settings-container { max-width: 740px; margin: 28px auto; padding: 0 20px; } /* Danger Zone */ .danger-zone { border-color: rgba(248, 113, 113, 0.3) !important; } .reset-options { display: flex; flex-direction: column; gap: 0; } .reset-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); } .reset-row:last-child { border-bottom: none; } .reset-info { flex: 1; } .reset-title { font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 3px; } .reset-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; } .btn-reset { padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid; white-space: nowrap; transition: opacity .15s; flex-shrink: 0; } .btn-reset:disabled { opacity: .5; cursor: default; } .btn-reset--warn { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); } .btn-reset--warn:hover:not(:disabled) { background: rgba(251, 191, 36, 0.2); } .btn-reset--danger { background: rgba(239, 68, 68, 0.12); color: #f87171; border-color: rgba(239, 68, 68, 0.4); } .btn-reset--danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.22); } .settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; } /* API Config — sub-tab panels */ .api-tab-panel { display: none; } .api-tab-panel.active { display: block; } .settings-section-title { padding: 14px 20px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .settings-field { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; } .settings-field:last-child { border-bottom: none; } .settings-field label { font-weight: 500; font-size: 13px; } .settings-field .hint { color: var(--text-muted); font-size: 12px; } .settings-field input[type="text"], .settings-field input[type="password"], .settings-field input[type="email"], .settings-field input[type="url"], .settings-field input[type="time"], .settings-field select, .settings-field textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 13px; padding: 9px 12px; width: 100%; transition: border-color 0.15s; -webkit-appearance: none; appearance: none; box-sizing: border-box; color-scheme: dark; } /* Custom dropdown arrow for select */ .settings-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237b7899' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; } .settings-field input[type="text"]:focus, .settings-field input[type="password"]:focus, .settings-field input[type="email"]:focus, .settings-field input[type="url"]:focus, .settings-field input[type="time"]:focus, .settings-field select:focus, .settings-field textarea:focus { outline: none; border-color: var(--pink); } /* In light mode, flip color-scheme so browser-native widgets (autofill, time segments, select option list) render with a light background */ [data-theme="light"] .settings-field input, [data-theme="light"] .settings-field select, [data-theme="light"] .settings-field textarea { color-scheme: light; } [data-theme="light"] .settings-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6670' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .settings-field textarea { resize: vertical; min-height: 80px; } /* Style the native time-picker icon to match the dark theme */ .settings-field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; opacity: 0.6; } .settings-field input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Time inputs side-by-side layout */ .settings-time-row { display: flex; gap: 16px; } .settings-time-row > div { flex: 1; display: flex; flex-direction: column; gap: 6px; } .settings-time-row label { font-weight: 500; font-size: 13px; } /* Override browser autofill */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px var(--surface2) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); } /* ── Toggle switch ── */ .toggle-switch { position: relative; display: inline-flex; align-items: center; width: 40px; height: 22px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--surface3); border: 1px solid var(--border2); border-radius: 22px; transition: background 0.2s, border-color 0.2s; } .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: var(--text-muted); border-radius: 50%; transition: transform 0.2s, background 0.2s; } .toggle-switch input:checked + .toggle-slider { background: var(--pink-dim); border-color: var(--pink); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--pink); } .toggle-switch input:disabled + .toggle-slider { opacity: 0.35; cursor: not-allowed; } /* ── Agent toggle list ── */ .agent-toggle-list { padding: 8px 20px 14px; display: flex; flex-direction: column; gap: 6px; } .agent-toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface2); transition: border-color 0.15s; } .agent-toggle-row:hover { border-color: var(--border2); } .agent-toggle-row.not-installed { opacity: 0.5; } .agent-toggle-icon { flex-shrink: 0; width: 32px; height: 32px; background: #1e293b; border: 1px solid #334155; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; letter-spacing: 0.03em; color: #94a3b8; } .agent-toggle-info { flex: 1; min-width: 0; } .agent-toggle-name { font-weight: 500; font-size: 13px; } .agent-toggle-sub { color: var(--text-muted); font-size: 11px; margin-top: 2px; } .settings-actions { padding: 14px 20px; display: flex; gap: 10px; border-top: 1px solid var(--border); } .btn { padding: 9px 22px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: opacity 0.15s, transform 0.1s; letter-spacing: 0.2px; } .btn:hover { opacity: 0.88; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; box-shadow: 0 4px 14px var(--pink-glow); } .btn-secondary { background: transparent; color: var(--text-muted); border-color: var(--border); } /* ── Terminal log ── */ .terminal { background: #06050f; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; font-size: 12px; line-height: 1.65; padding: 14px 16px; max-height: 420px; overflow-y: auto; color: #c4c0e0; } .terminal-line { display: flex; gap: 10px; white-space: pre-wrap; word-break: break-all; } .terminal-ts { color: var(--text-dim); flex-shrink: 0; } .terminal-agent { flex-shrink: 0; min-width: 80px; } .terminal-level { flex-shrink: 0; min-width: 48px; } .terminal-empty { color: var(--text-dim); font-style: italic; } .terminal-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-family: ui-monospace, 'Cascadia Code', monospace; font-weight: 500; } .terminal-badge.ok { background: var(--green-dim); color: var(--green); } .terminal-badge.warn { background: var(--yellow-dim); color: var(--yellow); } .terminal-badge.err { background: var(--red-dim); color: var(--red); } /* ── Test agents panel ── */ .test-agent-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface2); margin-bottom: 6px; } .test-agent-status { flex: 1; } .test-agent-name { font-weight: 500; } .test-agent-detail { color: var(--text-muted); font-size: 11px; margin-top: 2px; } /* ── Reports page ── */ .report-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 10px; } .report-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: center; gap: 16px; transition: border-color 0.15s, transform 0.15s; margin-bottom: 10px; } .report-card:hover { border-color: var(--border2); transform: translateY(-1px); } .report-card--portfolio { border-left: 3px solid var(--pink); background: linear-gradient(90deg, var(--pink-dim) 0%, var(--surface) 40%); } .report-card-icon { font-size: 28px; flex-shrink: 0; width: 48px; text-align: center; } .report-card-body { flex: 1; min-width: 0; } .report-card-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .report-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; } .report-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .report-card-action { flex-shrink: 0; } .report-btn { min-width: 110px; text-align: center; } .report-chip { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; } .report-chip.blue { background: var(--blue-dim); color: var(--blue); } .report-chip.pink { background: var(--pink-dim); color: var(--pink); } .report-chip.yellow { background: var(--yellow-dim); color: var(--yellow); } .report-chip.green { background: var(--green-dim); color: var(--green); } .reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 10px; } /* Not-installed state */ .reports-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 24px; text-align: center; } .reports-unavail-icon { font-size: 40px; opacity: 0.4; } .reports-unavail-title { font-size: 16px; font-weight: 600; color: var(--text); } .reports-unavail-sub { font-size: 13px; color: var(--text-muted); } .reports-unavail-code { display: inline-block; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 16px; font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 13px; color: var(--pink); margin-top: 4px; } /* ── Reports page v2 (rp-*) ── */ .rp-page { padding: 0 24px 32px; } .rp-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; } /* Card base */ .rp-card { display: flex; align-items: center; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; transition: border-color 0.15s, box-shadow 0.15s; } .rp-card:hover { border-color: var(--border2); box-shadow: 0 2px 12px rgba(0,0,0,0.18); } /* Portfolio: prominent left accent */ .rp-card--portfolio { border-left: 3px solid var(--blue); } /* Project: left accent by health */ .rp-card--health-healthy { border-left: 3px solid var(--green); } .rp-card--health-attention { border-left: 3px solid var(--yellow); } .rp-card--health-moderate { border-left: 3px solid var(--yellow); } .rp-card--health-high { border-left: 3px solid var(--orange); } .rp-card--health-at-risk { border-left: 3px solid var(--orange); } .rp-card--health-critical { border-left: 3px solid var(--red); } /* Card sections */ .rp-card-left { display: flex; align-items: flex-start; gap: 14px; flex: 1; padding: 18px 20px; min-width: 0; } .rp-card-icon { font-size: 26px; flex-shrink: 0; padding-top: 2px; } .rp-card-body { flex: 1; min-width: 0; } .rp-card-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; } .rp-card-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .rp-card-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Action column */ .rp-card-action { flex-shrink: 0; padding: 18px 20px 18px 12px; } /* Generate button */ .rp-gen-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: none; cursor: pointer; white-space: nowrap; transition: opacity 0.15s, transform 0.1s; background: var(--blue); color: #fff; min-width: 130px; justify-content: center; } .rp-gen-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); } .rp-gen-btn:disabled { opacity: 0.55; cursor: default; transform: none; } .rp-gen-btn--secondary { background: transparent; color: var(--blue); border: 1px solid var(--blue); } .rp-gen-btn--secondary:hover:not(:disabled) { background: var(--blue-dim); } /* Delete project button */ .proj-delete-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; border: 1px solid var(--red); background: transparent; color: var(--red); cursor: pointer; white-space: nowrap; transition: background 0.15s, opacity 0.15s; } .proj-delete-btn:hover { background: var(--red-dim); } /* Loading spinner inside button */ @keyframes rp-spin { to { transform: rotate(360deg); } } .rp-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rp-spin 0.7s linear infinite; vertical-align: middle; } /* Chips */ .rp-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; } .rp-chip--blue { background: var(--blue-dim); color: var(--blue); } .rp-chip--amber { background: var(--yellow-dim); color: var(--orange); } .rp-chip--red { background: rgba(239,68,68,.12); color: #ef4444; } .rp-chip--green { background: var(--green-dim); color: var(--green); } .rp-chip--gray { background: var(--surface2); color: var(--text-muted); } /* Health badge */ .rp-health-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; } .rp-health--health-healthy { background: var(--green-dim); color: var(--green); } .rp-health--health-attention { background: var(--yellow-dim); color: var(--yellow); } .rp-health--health-moderate { background: var(--yellow-dim); color: var(--yellow); } .rp-health--health-high { background: rgba(249,115,22,.12); color: var(--orange); } .rp-health--health-at-risk { background: rgba(249,115,22,.12); color: var(--orange); } .rp-health--health-critical { background: rgba(239,68,68,.12); color: #ef4444; } /* Status badge */ .rp-status-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--surface2); color: var(--text-muted); } .rp-status--active { background: var(--green-dim); color: var(--green); } .rp-status--on-hold { background: var(--yellow-dim); color: var(--yellow); } .rp-status--completed { background: var(--blue-dim); color: var(--blue); } .rp-projects-list { display: flex; flex-direction: column; gap: 0; } /* Multi-button action column (3 docs per project) */ .rp-card-action--multi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 14px 10px; flex-shrink: 0; } .rp-gen-btn--sm { padding: 7px 14px; font-size: 12px; min-width: 170px; } .rp-gen-btn--disabled, .rp-gen-btn[disabled] { opacity: 0.38; cursor: not-allowed; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ════════════════════════════════════════════════════════════ Agent process controls ════════════════════════════════════════════════════════════ */ /* Running state — green border glow on agent card */ .agent-card.running { border-color: var(--green); box-shadow: 0 0 0 1px rgba(34,197,94,0.2); } /* Running badge */ .badge-running { background: var(--green-dim); color: var(--green); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 500; } /* Per-card action button row */ .agent-card-actions { display: flex; gap: 6px; margin-top: 8px; } .btn-agent-start, .btn-agent-stop { flex: 1; padding: 5px 10px; border: 1px solid; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.1s; } .btn-agent-start:hover, .btn-agent-stop:hover { opacity: 0.85; transform: translateY(-1px); } .btn-agent-start:active, .btn-agent-stop:active { transform: translateY(0); } .btn-agent-start { background: var(--green-dim); color: var(--green); border-color: rgba(34,197,94,0.3); } .btn-agent-stop { background: var(--red-dim); color: var(--red); border-color: rgba(239,68,68,0.3); } /* Bulk action bar inside the agents panel */ .agents-start-error { margin: 0 0 10px; padding: 8px 12px; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 6px; font-size: 12px; color: #fca5a5; line-height: 1.6; } .agents-bulk-row { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; } .agents-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); } .agents-bulk-btns { display: flex; gap: 8px; } /* Start Team / Stop Team — header and bulk row */ .team-controls { display: flex; gap: 8px; align-items: center; } .btn-start-all, .btn-stop-all { padding: 7px 14px; border: 1px solid; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.1s; } .btn-start-all:hover, .btn-stop-all:hover { opacity: 0.85; transform: translateY(-1px); } .btn-start-all:active, .btn-stop-all:active { transform: translateY(0); } .btn-start-all { background: var(--green-dim); color: var(--green); border-color: rgba(34,197,94,0.35); } .btn-stop-all { background: var(--red-dim); color: var(--red); border-color: rgba(239,68,68,0.35); } /* Scan Platforms button — amber theme */ .btn-scan-platforms { padding: 7px 14px; border: 1px solid rgba(245,158,11,0.35); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.1s; background: rgba(245,158,11,0.12); color: #f59e0b; } .btn-scan-platforms:hover { opacity: 0.85; transform: translateY(-1px); } .btn-scan-platforms:active { transform: translateY(0); } .btn-scan-platforms:disabled, .btn-scan-platforms.btn-scan-queued { opacity: 0.55; cursor: default; pointer-events: none; background: rgba(245,158,11,0.07); } /* Disable buttons while HTMX request is in flight */ .htmx-request .btn-agent-start, .htmx-request .btn-agent-stop, .htmx-request .btn-start-all, .htmx-request .btn-stop-all, .htmx-request .btn-scan-platforms { opacity: 0.45; cursor: wait; pointer-events: none; } /* ════════════════════════════════════════════════════════════ Team Chat ════════════════════════════════════════════════════════════ */ .chat-panel { display: flex; flex-direction: column; min-height: 300px; } .chat-messages { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; max-height: 440px; overflow-y: auto; flex: 1; } /* ── Individual message wrapper ── */ .chat-message { display: flex; flex-direction: column; gap: 4px; max-width: 76%; } .chat-message-user { align-self: flex-end; align-items: flex-end; } .chat-message-agent { align-self: flex-start; align-items: flex-start; } /* ── Bubbles ── */ .chat-bubble { padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .chat-bubble-user { background: linear-gradient(135deg, var(--pink-dim), var(--purple-dim)); border: 1px solid rgba(233,30,140,0.3); color: var(--text); border-bottom-right-radius: 4px; } .chat-bubble-agent { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; } /* ── Agent name badges ── */ .chat-agent-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 2px 8px; border-radius: 4px; margin-bottom: 2px; } .chat-badge-pm { background: var(--blue-dim); color: var(--blue); } .chat-badge-risk { background: var(--yellow-dim); color: var(--yellow); } /* ── Timestamps ── */ .chat-meta { font-size: 10px; color: var(--text-dim); padding: 0 4px; } /* ── Thinking / pending indicator ── */ .chat-thinking { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; font-style: italic; padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; border-bottom-left-radius: 4px; } .thinking-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: thinking-pulse 1.2s infinite; flex-shrink: 0; } .thinking-dot:nth-child(2) { animation-delay: 0.2s; } .thinking-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes thinking-pulse { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } /* ── Input row ── */ .chat-input-row { padding: 12px 18px; border-top: 1px solid var(--border); } .chat-input-row form { display: flex; gap: 10px; } .chat-input { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 13px; padding: 9px 12px; transition: border-color 0.15s; } .chat-input:focus { outline: none; border-color: var(--pink); } .chat-input::placeholder { color: var(--text-dim); } .chat-send-btn { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; border: none; border-radius: var(--radius-sm); padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px var(--pink-glow); transition: opacity 0.15s, transform 0.1s; white-space: nowrap; } .chat-send-btn:hover { opacity: 0.88; transform: translateY(-1px); } .chat-send-btn:active { transform: translateY(0); } /* Disable send button while HTMX request is in flight */ .htmx-request .chat-send-btn { opacity: 0.5; cursor: wait; pointer-events: none; } /* ── Terminal-style activity log ─────────────────────────────────────────── */ .log-body { max-height: 420px; overflow-y: auto; font-family: 'Consolas', 'Cascadia Code', 'Fira Code', 'Menlo', monospace; font-size: 11.5px; line-height: 1.55; background: #0d1117; border-radius: 0 0 12px 12px; padding: 8px 0; } .log-body-full { max-height: none; border-radius: 0 0 12px 12px; } .log-line { display: flex; align-items: baseline; gap: 10px; padding: 1.5px 16px; border-left: 2px solid transparent; white-space: nowrap; overflow: hidden; } .log-line:hover { background: rgba(255,255,255,0.04); overflow: visible; white-space: normal; word-break: break-all; z-index: 1; } .log-line-error { border-left-color: #f85149; background: rgba(248,81,73,0.06); } .log-line-warning { border-left-color: #d29922; background: rgba(210,153,34,0.05); } .log-ts { color: #484f58; flex-shrink: 0; min-width: 68px; } .log-level { flex-shrink: 0; min-width: 56px; font-weight: 600; } .log-level-info { color: #58a6ff; } .log-level-debug { color: #484f58; } .log-level-warning { color: #d29922; } .log-level-error { color: #f85149; } .log-level-critical{ color: #ff7b72; font-weight: 700; } .log-agent { color: #7ee787; flex-shrink: 0; min-width: 110px; overflow: hidden; text-overflow: ellipsis; } .log-event { color: #e6edf3; flex-shrink: 0; min-width: 120px; } .log-data { color: #8b949e; overflow: hidden; text-overflow: ellipsis; } .log-line:hover .log-data { overflow: visible; text-overflow: unset; white-space: pre-wrap; word-break: break-all; } .panel-header-link { margin-left: auto; font-size: 11px; color: var(--text-muted); text-decoration: none; opacity: 0.7; transition: opacity 0.15s; } .panel-header-link:hover { opacity: 1; color: var(--pink); } /* ── Activity Board ──────────────────────────────────────────────────────── */ .ab-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); margin-left: 2px; flex-shrink: 0; } .ab-body { display: flex; flex-direction: column; gap: 0; padding: 6px 0 6px; } /* Operation group card */ .ab-group { border-left: 3px solid var(--border); margin: 4px 16px; border-radius: 0 8px 8px 0; background: var(--surface2); overflow: hidden; flex-shrink: 0; /* must not shrink inside the flex scroll container */ } .ab-op-morning { border-left-color: #f59e0b; } .ab-op-risk { border-left-color: var(--red); } .ab-op-replan { border-left-color: var(--purple); } .ab-op-slash { border-left-color: var(--cyan); } .ab-op-chat { border-left-color: var(--blue); } .ab-op-raw { border-left-color: var(--border2); } .ab-body::-webkit-scrollbar { width: 4px; } .ab-body::-webkit-scrollbar-track { background: transparent; } .ab-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; } .ab-body::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* Group header row */ .ab-group-header { display: flex; align-items: center; gap: 8px; padding: 7px 12px 6px; background: var(--surface3); flex-wrap: wrap; } .ab-op-icon { font-size: 14px; flex-shrink: 0; } .ab-op-label { font-weight: 600; font-size: 13px; color: var(--text); flex-shrink: 0; } .ab-op-project { font-size: 11px; background: var(--blue-dim); color: var(--blue); border: 1px solid var(--blue); border-radius: 20px; padding: 1px 8px; flex-shrink: 0; } .ab-op-preview { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .ab-op-time { font-size: 11px; color: var(--text-dim); margin-left: auto; flex-shrink: 0; font-variant-numeric: tabular-nums; } /* Steps list */ .ab-steps { display: flex; flex-direction: column; gap: 0; padding: 4px 0 4px; flex-shrink: 0; /* must not shrink inside the group card */ } .ab-steps-empty { padding: 6px 14px; } /* Individual step */ .ab-step { display: flex; align-items: flex-start; gap: 8px; padding: 3px 14px; font-size: 12px; line-height: 1.4; flex-shrink: 0; /* preserve full height — scroll container handles overflow */ } .ab-step:hover { background: rgba(255,255,255,0.03); } /* Thinking block — primary content (Claude's reasoning) */ .ab-step-thinking { display: flex; gap: 8px; padding: 7px 14px 7px 14px; margin: 2px 0; align-items: flex-start; border-left: 3px solid var(--purple); background: var(--surface2); } .ab-thinking-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; opacity: 0.65; } .ab-thinking-text { font-size: 12.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; flex: 1; } /* Tool call step — compact, indented under thinking */ .ab-step-tool { padding: 2px 14px 2px 28px !important; /* indented to align under thinking text */ } .ab-step-tool .ab-step-icon { flex-shrink: 0; width: 14px; font-size: 11px; color: var(--green); font-weight: 700; } .ab-step-tool .ab-step-icon:has(+ .ab-step-fn) { } /* no extra rule needed */ .ab-step-fn { font-family: 'Consolas', 'Cascadia Code', monospace; font-size: 11px; color: var(--text-muted); flex-shrink: 0; } .ab-step-err { font-size: 11px; color: var(--red); flex: 1; overflow: hidden; text-overflow: ellipsis; } .ab-step-agent { font-size: 10px; color: var(--text-dim); margin-left: auto; flex-shrink: 0; } /* Agent response step */ .ab-step-response { flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 14px; border-top: 1px solid var(--border); background: var(--surface); } .ab-step-agent-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--purple); background: var(--purple-dim); border: 1px solid var(--purple); border-radius: 4px; padding: 1px 6px; } .ab-step-text { font-size: 12.5px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: none; overflow-y: visible; } /* Misc step */ .ab-step-misc .ab-step-fn { color: var(--text-dim); } .btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); font-size: 13px; text-decoration: none; transition: background 0.15s, color 0.15s; } .btn-back:hover { background: var(--surface3); color: var(--text); } /* ── Full-page Chat layout ───────────────────────────────────────────────── */ .chat-page-layout { display: flex; flex-direction: column; height: calc(100vh - 140px); gap: 0; background: var(--surface1); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .chat-page-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 24px 28px; scroll-behavior: smooth; } .chat-empty { margin: auto; } .chat-page-input-area { border-top: 1px solid var(--border); background: var(--surface2); padding: 16px 20px 12px; display: flex; flex-direction: column; gap: 8px; } .chat-page-input-row { display: flex; align-items: center; gap: 10px; } .chat-page-text-input { flex: 1; } /* File attachment */ .chat-attachment-hidden { display: none; } .chat-attach-btn { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface3); color: var(--text); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; } .chat-attach-btn:hover { background: var(--surface4, var(--surface3)); border-color: var(--pink); } .chat-file-preview { display: flex; align-items: center; gap: 8px; background: var(--surface3); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: 12px; color: var(--text-muted); } .chat-file-icon { font-size: 14px; } .chat-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-file-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0 4px; line-height: 1; } .chat-file-remove:hover { color: var(--pink); } .chat-file-hint { font-size: 11px; color: var(--text-dim); padding: 0 4px; } /* ════════════════════════════════════════════════════════════ Conversation history — chat page two-column layout ════════════════════════════════════════════════════════════ */ /* Outer shell: fills the .content area */ .chat-page-shell { display: flex; height: 100vh; overflow: hidden; } /* ── Left: Conversation sidebar ── */ .conv-sidebar { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; } .conv-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .conv-sidebar-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); } .conv-new-btn { background: var(--pink-dim); color: var(--pink); border: 1px solid rgba(233,30,140,0.25); border-radius: 6px; font-size: 11px; font-weight: 600; padding: 4px 10px; cursor: pointer; transition: background 0.15s, opacity 0.15s; white-space: nowrap; } .conv-new-btn:hover { background: rgba(233,30,140,0.25); opacity: 0.9; } /* Scrollable conversation list */ .conv-list { flex: 1; overflow-y: auto; padding: 6px 0; } /* Platform group */ .conv-group { margin-bottom: 4px; } .conv-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-dim); padding: 8px 14px 4px; display: flex; align-items: center; gap: 5px; } /* Conversation list item */ .conv-item-wrap { position: relative; } .conv-item-wrap:hover .conv-delete-btn { opacity: 1; } .conv-delete-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: 0; background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 3px 7px; border-radius: 4px; font-size: 11px; line-height: 1; transition: opacity 0.15s, color 0.15s, background 0.15s; z-index: 1; } .conv-delete-btn:hover { color: #ef4444; background: rgba(239, 68, 68, 0.12); opacity: 1; } .conv-item { display: block; padding: 8px 14px; text-decoration: none; color: var(--text-muted); border-left: 2px solid transparent; transition: background 0.12s, color 0.12s, border-color 0.12s; cursor: pointer; } .conv-item:hover { background: var(--surface2); color: var(--text); } .conv-item.active { background: var(--pink-dim); color: var(--text); border-left-color: var(--pink); } .conv-item-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; color: var(--text); } .conv-item.active .conv-item-name { color: var(--text); } .conv-item-name--default { color: var(--text-muted); font-style: italic; } .conv-item.active .conv-item-name--default { color: var(--text-muted); } .conv-item-preview { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .conv-item-meta { font-size: 10px; color: var(--text-dim); } .conv-empty-hint { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 12px; line-height: 1.7; } /* ── Right: Active conversation ── */ .conv-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; background: var(--bg); } /* Conversation header */ .conv-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .conv-header-info { display: flex; align-items: center; gap: 12px; min-width: 0; } .conv-header-platform-icon { font-size: 22px; flex-shrink: 0; } .conv-header-title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .conv-header-title:hover { color: var(--pink); } .conv-title-default { color: var(--text-muted); } .conv-title-default:hover { color: var(--pink); } /* Display row: title + pencil button */ .conv-title-display { display: flex; align-items: center; gap: 6px; } .conv-rename-btn { background: none; border: none; cursor: pointer; font-size: 12px; opacity: 0; padding: 2px 4px; border-radius: 4px; transition: opacity 0.15s; color: var(--text-muted); flex-shrink: 0; } .conv-title-display:hover .conv-rename-btn { opacity: 1; } .conv-rename-btn:hover { background: var(--surface3); opacity: 1; } /* Inline rename form */ .conv-title-input { background: var(--surface3); border: 1px solid var(--pink); color: var(--text); border-radius: 6px; padding: 3px 8px; font-size: 14px; font-weight: 600; width: 220px; outline: none; } .conv-title-save-btn { background: var(--pink-dim); color: var(--pink); border: 1px solid var(--pink-dim); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 13px; font-weight: 700; } .conv-title-save-btn:hover { background: var(--pink); color: #fff; } .conv-title-cancel-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 3px 6px; border-radius: 4px; } .conv-title-cancel-btn:hover { color: var(--text); background: var(--surface3); } .conv-header-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .conv-header-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 11px; color: var(--text-muted); } /* Messages area inside the right panel */ .chat-page-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; scroll-behavior: smooth; } /* Empty conversation placeholder */ .conv-main-empty { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bg); } /* ── Empty state (no conversation selected) ── */ .conv-empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 40px 24px; max-width: 320px; } .conv-empty-title { font-size: 16px; font-weight: 600; color: var(--text); } .conv-empty-sub { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .btn-start-chat { margin-top: 6px; background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; border: none; border-radius: var(--radius-sm); padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px var(--pink-glow); transition: opacity 0.15s, transform 0.1s; } .btn-start-chat:hover { opacity: 0.88; transform: translateY(-1px); } .btn-start-chat:active { transform: translateY(0); } /* ── New Chat Form ── */ .new-chat-form-wrap { max-width: 520px; width: 100%; margin: auto; padding: 32px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .new-chat-form-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .new-chat-form-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; } /* Platform selector grid */ .platform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; } .platform-card { cursor: pointer; position: relative; } /* All Platforms spans the full 2-column width */ .platform-card--wide { grid-column: 1 / -1; } .platform-card--wide .platform-card-inner { flex-direction: row; align-items: center; gap: 10px; } .platform-card--wide .platform-icon { font-size: 18px; margin-bottom: 0; } .platform-card--wide .platform-name { margin-right: 6px; } .platform-card--wide .platform-hint::before { content: "— "; } .platform-radio { position: absolute; opacity: 0; width: 0; height: 0; } .platform-card-inner { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface2); border: 2px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.15s, background 0.15s; } .platform-card:hover .platform-card-inner { border-color: var(--border2); background: var(--surface3); } .platform-radio:checked + .platform-card-inner { border-color: var(--pink); background: var(--pink-dim); } .platform-icon { font-size: 20px; margin-bottom: 2px; } .platform-name { font-size: 13px; font-weight: 600; color: var(--text); } .platform-hint { font-size: 11px; color: var(--text-muted); line-height: 1.4; } /* ── Resource page — hrs/week inline edit ───────────────────────────────── */ .res-hrs-cell { white-space: nowrap; } .res-hrs-display { display: flex; align-items: center; gap: 6px; } .res-hrs-value { font-size: 13px; color: var(--text); min-width: 32px; } .res-hrs-edit-btn { background: none; border: none; cursor: pointer; font-size: 12px; opacity: 0.4; padding: 2px 4px; border-radius: 4px; transition: opacity 0.15s, background 0.15s; line-height: 1; } .res-hrs-edit-btn:hover { opacity: 1; background: var(--surface3); } .res-hrs-form { align-items: center; gap: 4px; } .res-hrs-input { width: 58px; background: var(--surface3); border: 1px solid var(--pink); color: var(--text); border-radius: 6px; padding: 3px 6px; font-size: 12px; } .res-hrs-save-btn { background: var(--pink-dim); color: var(--pink); border: 1px solid var(--pink); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 11px; font-weight: 600; } .res-hrs-save-btn:hover { background: var(--pink); color: #fff; } .res-hrs-cancel-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; } .res-hrs-cancel-btn:hover { color: var(--text); background: var(--surface3); } /* ── Resource page — utilization cell with per-project breakdown ─────────── */ .res-util-cell { vertical-align: top; padding-top: 10px; } .res-util-total { font-size: 13px; font-weight: 600; color: var(--text); } .res-util-total.util-over { color: var(--red, #f87171); } .res-util-total.util-low { color: var(--text-muted); } .res-util-breakdown { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; min-width: 160px; } .res-util-proj { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); } .res-util-proj-name { width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .res-util-proj-bar-wrap { flex: 1; background: var(--surface3); border-radius: 3px; height: 4px; overflow: hidden; min-width: 40px; } .res-util-proj-bar { display: block; height: 100%; border-radius: 3px; transition: width 0.3s; } .res-util-proj-pct { width: 30px; text-align: right; flex-shrink: 0; } /* ── Resources page — manage mode ───────────────────────────────────────── */ /* Status cell: chip visible in view mode, dropdown visible in manage mode */ .res-status-edit { display: none; } .manage-mode .res-status-view { display: none !important; } .manage-mode .res-status-edit { display: inline-flex !important; align-items: center; } /* Manage-mode info bar — hidden in view mode, shown in manage mode */ .res-manage-bar { display: none; } .manage-mode .res-manage-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--purple-dim); border: 1px solid var(--border2); border-radius: 10px; margin-bottom: 16px; font-size: 13px; color: var(--text-muted); } /* Status dropdown in manage mode */ .res-status-edit select { background: var(--surface3); border: 1px solid var(--border2); color: var(--text); border-radius: 6px; padding: 3px 6px; font-size: 11px; cursor: pointer; min-width: 110px; } .res-status-edit select:focus { outline: none; border-color: var(--purple); } /* Manage-mode only elements — edit/delete buttons, Actions header, Add forms */ .res-manage-only { display: none !important; } .manage-mode .res-manage-only { display: table-cell !important; } /* For non-table elements (divs), override with flex/block */ .manage-mode div.res-manage-only, .manage-mode .res-add-form-wrap { display: block !important; } /* Add-resource form inside manage mode */ .res-add-form-wrap details summary::-webkit-details-marker { color: var(--text-muted); } .res-add-form-wrap details[open] summary { color: var(--text); margin-bottom: 6px; } /* Chat title field */ .new-chat-field { margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; } .new-chat-field label { font-size: 13px; font-weight: 500; color: var(--text); } .hint-inline { font-size: 11px; color: var(--text-muted); font-weight: 400; } .new-chat-input { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 13px; padding: 9px 12px; width: 100%; transition: border-color 0.15s; } .new-chat-input:focus { outline: none; border-color: var(--pink); } .new-chat-input::placeholder { color: var(--text-dim); } .field-hint { font-size: 11px; color: var(--text-muted); line-height: 1.5; } .field-hint code { font-family: monospace; font-size: 11px; background: var(--surface3, #e8e8f0); padding: 1px 4px; border-radius: 3px; } /* Form action buttons */ .new-chat-actions { display: flex; gap: 10px; align-items: center; } .btn-cancel-chat { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 18px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-cancel-chat:hover { background: var(--surface2); color: var(--text); } /* ════════════════════════════════════════════════════════════ Projects — list page & detail dashboard ════════════════════════════════════════════════════════════ */ /* ── Empty state ── */ .proj-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 80px 32px; } .proj-empty-icon { font-size: 48px; opacity: 0.35; } .proj-empty-title { font-size: 18px; font-weight: 600; color: var(--text); } .proj-empty-sub { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 440px; } .proj-empty-link { color: var(--pink); text-decoration: none; } .proj-empty-link:hover { text-decoration: underline; } /* ── Summary strip ── */ .proj-summary-strip { display: flex; gap: 12px; padding: 0 24px 16px; flex-wrap: wrap; } .proj-summary-chip { display: flex; align-items: baseline; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px; } .proj-summary-num { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; } .proj-summary-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); } /* ── Platform group ── */ .proj-group { padding: 0 24px 28px; } .proj-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .proj-group-icon { font-size: 16px; } .proj-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); } .proj-group-count { background: var(--surface2); color: var(--text-muted); border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 600; } /* ── Project card grid ── */ .proj-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; } /* ── Individual project card ── */ .proj-card { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--text); cursor: pointer; transition: border-color 0.18s, transform 0.15s, box-shadow 0.18s; position: relative; overflow: hidden; } .proj-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--pink), var(--purple)); opacity: 0; transition: opacity 0.2s; } .proj-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .proj-card:hover::before { opacity: 1; } .proj-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .proj-card-name { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; flex: 1; } .proj-card-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .proj-methodology { font-size: 11px; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; font-weight: 500; } /* ── Status badge ── */ .proj-status-badge { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 3px 9px; white-space: nowrap; flex-shrink: 0; } .proj-status-active { background: var(--green-dim); color: var(--green); } .proj-status-on-hold { background: var(--yellow-dim); color: var(--yellow); } .proj-status-completed { background: var(--blue-dim); color: var(--blue); } /* ── Count row ── */ .proj-card-counts { display: flex; align-items: center; gap: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .proj-count-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 6px; } .proj-count-num { font-size: 18px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .proj-count-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; font-weight: 600; } .proj-count-divider { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; } .text-red { color: var(--red); } .text-orange { color: var(--orange); } .text-yellow { color: var(--yellow); } /* ── Risk severity bar ── */ .proj-risk-bar-wrap { display: flex; flex-direction: column; gap: 6px; } .proj-risk-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface3); } .proj-risk-bar-lg { height: 10px; border-radius: 5px; } .proj-risk-seg { height: 100%; } .seg-critical { background: var(--red); } .seg-high { background: var(--orange); } .seg-medium { background: var(--yellow); } .seg-low { background: var(--green); } .proj-risk-legend { display: flex; flex-wrap: wrap; gap: 8px; } .proj-risk-dot { font-size: 10px; font-weight: 600; display: flex; align-items: center; gap: 4px; } .proj-risk-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot-critical::before { background: var(--red); } .dot-high::before { background: var(--orange); } .dot-medium::before { background: var(--yellow); } .dot-low::before { background: var(--green); } .dot-critical { color: var(--red); } .dot-high { color: var(--orange); } .dot-medium { color: var(--yellow); } .dot-low { color: var(--green); } /* Severity chips (detail view) */ .proj-severity-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .proj-sev-chip { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; } .proj-sev-chip span { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .chip-critical { background: var(--red-dim); color: var(--red); } .chip-high { background: var(--orange-dim); color: var(--orange); } .chip-medium { background: var(--yellow-dim); color: var(--yellow); } .chip-low { background: var(--green-dim); color: var(--green); } /* ── Card dates + CTA ── */ .proj-card-dates { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; } .proj-card-cta { font-size: 12px; font-weight: 600; color: var(--pink); margin-top: auto; padding-top: 4px; opacity: 0; transition: opacity 0.15s; } .proj-card:hover .proj-card-cta { opacity: 1; } /* ════════════════════════════════════════════════════════════ Project detail page ════════════════════════════════════════════════════════════ */ /* Header */ .proj-detail-header-left { display: flex; align-items: flex-start; gap: 16px; } .proj-detail-title-wrap { display: flex; flex-direction: column; gap: 6px; } .proj-detail-title { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; } .proj-detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Stats row */ .proj-detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 24px 20px; } .proj-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; } .proj-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .proj-stat-card.pink::before { background: linear-gradient(90deg, var(--pink), var(--purple)); } .proj-stat-card.blue::before { background: linear-gradient(90deg, var(--blue), var(--cyan)); } .proj-stat-card.green::before { background: var(--green); } .proj-stat-card.yellow::before { background: linear-gradient(90deg, var(--yellow), var(--orange)); } .proj-stat-card.orange::before { background: linear-gradient(90deg, var(--orange), var(--red)); } .proj-stat-card.red::before { background: var(--red); } .proj-stat-card.purple::before { background: linear-gradient(90deg, var(--purple), var(--blue)); } .proj-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 8px; } .proj-stat-value { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.8px; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .proj-stat-card.pink .proj-stat-value { color: var(--pink); } .proj-stat-card.blue .proj-stat-value { color: var(--blue); } .proj-stat-card.green .proj-stat-value { color: var(--green); } .proj-stat-card.yellow .proj-stat-value { color: var(--yellow); } .proj-stat-card.orange .proj-stat-value { color: var(--orange); } .proj-stat-card.red .proj-stat-value { color: var(--red); } .proj-stat-card.purple .proj-stat-value { color: var(--purple); } .proj-stat-sub { font-size: 11px; color: var(--text-muted); } /* Detail two-column grid */ .proj-detail-grid { display: grid; grid-template-columns: 320px 1fr; gap: 14px; padding: 0 24px 32px; align-items: start; } .proj-detail-col-left, .proj-detail-col-right { display: flex; flex-direction: column; gap: 14px; } .proj-panel { border-radius: var(--radius); } /* Goals list */ .proj-goals-list { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; } .proj-goal-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); line-height: 1.5; } .proj-goal-check { color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: 1px; } /* Team member cards */ .proj-team-grid { display: flex; flex-direction: column; gap: 0; } .proj-team-card { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); transition: background 0.12s; } .proj-team-card:last-child { border-bottom: none; } .proj-team-card:hover { background: var(--surface2); } .proj-team-avatar { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--purple-dim), var(--pink-dim)); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--pink); flex-shrink: 0; } .proj-team-name { font-size: 13px; font-weight: 500; color: var(--text); } .proj-team-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* Description */ .proj-description { padding: 14px 18px; font-size: 13px; color: var(--text-muted); line-height: 1.7; } /* Risk / issue table rows */ .proj-risk-title { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 2px; } .proj-risk-mitigation { font-size: 11px; color: var(--text-muted); } .proj-category-chip { display: inline-block; background: var(--surface3); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; font-size: 10px; color: var(--text-muted); font-weight: 500; } /* Risk / issue status pill */ .proj-risk-status { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 2px 7px; white-space: nowrap; } .risk-status-open { background: var(--red-dim); color: var(--red); } .risk-status-progress { background: var(--blue-dim); color: var(--blue); } .risk-status-closed { background: var(--green-dim); color: var(--green); } .risk-status-accepted { background: var(--surface3); color: var(--text-muted); } .risk-status-escalated { background: var(--orange-dim); color: var(--orange); } /* Platform badge extension for "both" variant */ .badge-both { background: var(--cyan-dim); color: var(--cyan); } /* ── Live tasks panel ─────────────────────────────────────────────────────── */ /* "Live" indicator badge in the panel header */ .proj-live-badge { font-size: 10px; font-weight: 700; color: var(--green); background: var(--green-dim); border-radius: 4px; padding: 2px 7px; letter-spacing: 0.3px; text-transform: none; } /* API error hint in header */ .proj-sync-error { font-size: 10px; font-weight: 600; color: var(--yellow); background: var(--yellow-dim); border-radius: 4px; padding: 2px 7px; cursor: help; text-transform: none; letter-spacing: 0; } /* Phase/group sub-header inside the task panel */ .task-phase-header { padding: 10px 18px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); background: var(--surface2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .task-phase-header:first-of-type { border-top: none; } /* Task table body (within each phase group) */ .task-panel-body { overflow-x: auto; max-height: none; } /* Archived / deleted task row */ .task-row-archived td { opacity: 0.45; } .task-row-deleted td { opacity: 0.3; text-decoration: line-through; } /* Diagnostic box for task sync errors */ .task-diag-box { background: var(--surface3); border: 1px solid var(--border2); border-radius: 6px; padding: 8px 14px; font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 11px; color: var(--red); max-width: 520px; margin: 8px auto 12px; text-align: left; word-break: break-all; } .task-diag-hint { font-size: 12px; color: var(--text-muted); max-width: 480px; margin: 0 auto; line-height: 1.6; } .task-diag-code { background: var(--surface3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--pink); } /* Status chip from Monday.com column value text */ .task-status-chip { display: inline-block; background: var(--surface3); border: 1px solid var(--border2); border-radius: 5px; padding: 2px 8px; font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; } /* ════════════════════════════════════════════════════════════ Home Page — Daemon Card ════════════════════════════════════════════════════════════ */ .home-activity-wrap { padding: 0 24px 24px; } #home-daemon-wrap { padding: 16px 24px 4px; } /* Action Summary + Activity Board — same inset as the daemon card */ #panel-action-summary, #panel-activity-board { margin: 14px 24px 0; } #panel-activity-board { margin-bottom: 24px; /* overflow:hidden kept on .panel base class for border-radius; ab-body below handles the scroll independently */ } #panel-activity-board .ab-body { height: 480px; /* matches action-summary tab height */ overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--border2) transparent; /* Firefox */ } /* ── Home page — Live Context card ──────────────────────────────────────── */ .live-ctx-card { margin: 0 24px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .live-ctx-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 0; gap: 12px; } .live-ctx-title-group { display: flex; align-items: center; gap: 8px; } .live-ctx-pulse { width: 8px; height: 8px; border-radius: 50%; background: #a5b4fc; animation: pulse-ring 2s ease-in-out infinite; flex-shrink: 0; } @keyframes pulse-ring { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } .live-ctx-title { font-size: 13px; font-weight: 600; color: var(--text); } .live-ctx-badge { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: rgba(99,102,241,0.15); color: #a5b4fc; } .live-ctx-updated { font-size: 11px; color: var(--text-muted); } .live-ctx-textarea { display: block; width: 100%; box-sizing: border-box; background: transparent; border: none; border-top: 1px solid transparent; color: var(--text); font-size: 13px; line-height: 1.6; padding: 12px 18px; resize: vertical; outline: none; font-family: inherit; transition: border-color 0.15s; } .live-ctx-textarea:focus { border-top-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.03); } .live-ctx-textarea::placeholder { color: var(--text-muted); } .live-ctx-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 14px; gap: 12px; } .live-ctx-hint { font-size: 11px; color: var(--text-muted); font-style: italic; } .live-ctx-save-btn { background: rgba(99,102,241,0.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.3); border-radius: 8px; padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .live-ctx-save-btn:hover { background: rgba(99,102,241,0.3); color: #fff; } .home-daemon-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } /* Hero row */ .home-daemon-hero { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); } .home-daemon-title-group { display: flex; align-items: center; gap: 14px; } .home-daemon-icon { font-size: 28px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pink-dim), var(--purple-dim)); border: 1px solid var(--border2); border-radius: 12px; } .home-daemon-title { font-size: 16px; font-weight: 700; color: var(--text); } .home-daemon-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .home-daemon-controls { display: flex; align-items: center; gap: 14px; } .home-daemon-status { display: flex; align-items: center; gap: 7px; } .home-daemon-status-label { font-size: 12px; font-weight: 600; color: var(--text-muted); } /* Greeting block */ .home-daemon-greeting { padding: 20px 24px 4px; } .home-greeting-text { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; } .home-greeting-date { font-size: 13px; color: var(--text-muted); margin-top: 4px; } /* Section label */ .home-daemon-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); padding: 16px 24px 8px; } /* Prefs grid */ .home-daemon-prefs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; padding: 0 24px 4px; } .home-pref-item { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; } .home-pref-icon { font-size: 15px; flex-shrink: 0; } .home-pref-key { font-size: 12px; color: var(--text-muted); flex: 1; } .home-pref-val { font-size: 12px; font-weight: 600; color: var(--text); } .home-pref-enabled { color: var(--green); } .home-pref-disabled { color: var(--text-dim); } .home-pref-all { color: var(--cyan); font-style: italic; } /* Capabilities list */ .home-capabilities { display: flex; flex-direction: column; gap: 6px; padding: 0 24px 20px; } .home-capability-item { display: flex; align-items: center; gap: 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; transition: border-color 0.2s; } .home-capability-item:hover { border-color: var(--border2); } .home-capability-dim { opacity: 0.5; } .home-cap-avatar { width: 34px !important; height: 34px !important; font-size: 16px !important; flex-shrink: 0; } .home-cap-info { flex: 1; min-width: 0; } .home-cap-name { font-size: 13px; font-weight: 600; color: var(--text); } .home-cap-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ── Org Tree ─────────────────────────────────────────────────────── */ .home-org-tree { padding: 0 24px 24px; display: flex; flex-direction: column; align-items: center; } /* Collapsible body */ .home-org-body { display: flex; flex-direction: column; align-items: center; width: 100%; overflow: hidden; max-height: 1000px; /* large enough for full content */ transition: max-height 0.3s ease, opacity 0.25s ease; opacity: 1; } .home-org-body--collapsed { max-height: 0; opacity: 0; pointer-events: none; } /* PMO AI root card */ .home-org-pmo { display: flex; align-items: center; justify-content: space-between; width: 100%; background: linear-gradient(135deg, var(--pink-dim) 0%, var(--purple-dim) 100%); border: 1px solid var(--pink); border-radius: var(--radius); padding: 14px 20px; gap: 12px; cursor: pointer; user-select: none; transition: opacity 0.15s; } .home-org-pmo:hover { opacity: 0.85; } .home-org-pmo-left { display: flex; align-items: center; gap: 14px; } .home-org-pmo-icon-wrap { width: 40px; height: 40px; background: var(--pink-dim); border: 1px solid var(--pink); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .home-org-pmo-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.01em; } .home-org-pmo-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .home-org-pmo-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; white-space: nowrap; } .home-org-pmo-badge-active { background: var(--green-dim); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); } .home-org-pmo-badge-offline { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); } .home-org-pmo-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .home-org-chevron { font-size: 14px; color: var(--text-muted); transition: transform 0.25s ease; line-height: 1; } /* Connector: PMO → PM */ .home-org-stem { width: 2px; height: 20px; background: var(--border2); flex-shrink: 0; } /* PM card (Orchestrator) */ .home-org-pm-card { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 12px 18px; gap: 12px; } .home-org-agent-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .home-org-avatar { width: 36px !important; height: 36px !important; font-size: 13px !important; flex-shrink: 0; } .home-org-avatar-sm { width: 30px !important; height: 30px !important; font-size: 11px !important; } .home-org-agent-info { flex: 1; min-width: 0; } .home-org-agent-name { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .home-org-agent-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .home-org-role-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pink); background: var(--pink-dim); border: 1px solid color-mix(in srgb, var(--pink) 25%, transparent); padding: 2px 7px; border-radius: 10px; } /* Branch connector: PM → Specialists */ .home-org-branch-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; } .home-org-branch-stem { width: 2px; height: 16px; background: var(--border2); } .home-org-branch-bar { /* Horizontal bar connecting specialist columns */ height: 2px; background: var(--border2); width: calc(100% - 80px); /* inset so it lines up with card midpoints */ margin: 0 40px; } /* Specialist columns */ .home-org-specialists { display: flex; gap: 10px; width: 100%; align-items: flex-start; } .home-org-specialist-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; } .home-org-branch-drop { width: 2px; height: 14px; background: var(--border2); } .home-org-specialist-card { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color 0.2s; } .home-org-specialist-card:hover { border-color: var(--border2); } .home-org-specialist-top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; } .home-org-specialist-name { font-size: 12px; font-weight: 600; } .home-org-specialist-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; } .home-org-specialist-footer { display: flex; justify-content: flex-end; } /* Stopped state */ .home-daemon-stopped { text-align: center; padding: 32px 24px 16px; } .home-stopped-icon { font-size: 40px; margin-bottom: 12px; } .home-stopped-title { font-size: 16px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; } .home-stopped-desc { font-size: 13px; color: var(--text-dim); max-width: 420px; margin: 0 auto; line-height: 1.6; } /* ── Preference Rules Table ──────────────────────────────────────────────── */ .pref-table { width: 100%; border-collapse: collapse; font-size: 13px; } .pref-table thead th { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); text-align: left; background: var(--surface2); } .pref-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; } .pref-table tbody tr:last-child { border-bottom: none; } .pref-table tbody tr:hover { background: var(--surface2); } .pref-col-num { width: 44px; text-align: center; color: var(--text-muted); font-size: 12px; padding: 10px 8px; } .pref-col-cat { width: 155px; padding: 8px 10px; } .pref-col-rule { padding: 8px 14px; } .pref-col-actions { width: 76px; text-align: right; padding: 8px 8px; white-space: nowrap; } /* Static category badge (read-only in table rows) */ .pref-cat-badge { display: inline-block; font-size: 12px; color: var(--text-muted); padding: 3px 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; white-space: nowrap; user-select: none; } /* Category select — used in add-row strip only */ .pref-cat-select { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 12px; padding: 5px 8px; width: 100%; cursor: pointer; -webkit-appearance: none; appearance: none; } .pref-cat-select--sm { font-size: 12px; } .pref-cat-select:focus { outline: none; border-color: var(--purple); } /* Rule text cell — read-only by default */ .pref-rule-text { min-height: 22px; padding: 4px 6px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: default; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; outline: none; } /* Active edit state */ .pref-rule-text--editing { cursor: text; border-color: var(--purple) !important; background: var(--surface2); } /* Edit (pencil) button */ .pref-edit-btn { background: none; border: none; cursor: pointer; font-size: 14px; opacity: 0.35; padding: 4px 5px; border-radius: var(--radius-sm); transition: opacity 0.12s, background 0.12s; } .pref-edit-btn:hover { opacity: 1; background: var(--purple-dim); } /* Done (checkmark) button — shown while editing */ .pref-done-btn { background: var(--purple-dim); border: 1px solid var(--purple); color: var(--purple); cursor: pointer; font-size: 13px; font-weight: 600; padding: 3px 7px; border-radius: var(--radius-sm); transition: background 0.12s, color 0.12s; } .pref-done-btn:hover { background: var(--purple); color: #fff; } /* Delete button */ .pref-del-btn { background: none; border: none; cursor: pointer; font-size: 14px; opacity: 0.35; padding: 4px 5px; border-radius: var(--radius-sm); transition: opacity 0.12s, background 0.12s; } .pref-del-btn:hover { opacity: 1; background: var(--red-dim); } /* Empty-state row */ .pref-empty-row td { padding: 24px 20px; color: var(--text-muted); font-size: 13px; text-align: center; } /* Add-row strip at bottom of table section */ .pref-add-row { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface2); } .pref-add-row .pref-cat-select { width: 155px; flex-shrink: 0; } .pref-rule-input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; padding: 7px 12px; outline: none; transition: border-color 0.15s; } .pref-rule-input:focus { border-color: var(--purple); } .pref-add-btn { flex-shrink: 0; white-space: nowrap; } [data-theme="light"] .pref-cat-select, [data-theme="light"] .pref-rule-input { color-scheme: light; } /* ── Current Situation — Settings highlight ──────────────────────────────── */ .settings-section--highlight { border: 1px solid rgba(99,102,241,0.35); border-radius: 12px; box-shadow: 0 0 0 3px rgba(99,102,241,0.07); } .situation-onboarding-banner { background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); border-radius: 8px; padding: 12px 14px; margin-bottom: 4px; } .situation-onboarding-banner strong { display: block; font-size: 13px; font-weight: 600; color: #a5b4fc; margin-bottom: 4px; line-height: 1.5; } .situation-onboarding-banner p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; overflow-wrap: break-word; word-break: break-word; } /* ── Current Situation — Home page nudge ─────────────────────────────────── */ .situation-nudge { display: flex; align-items: center; gap: 14px; background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.2); border-radius: 12px; padding: 14px 20px; margin-bottom: 20px; cursor: pointer; transition: background 0.15s, border-color 0.15s; text-decoration: none; } .situation-nudge:hover { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.35); } .situation-nudge-icon { font-size: 22px; flex-shrink: 0; } .situation-nudge-text { flex: 1; min-width: 0; } .situation-nudge-text strong { display: block; font-size: 14px; font-weight: 600; color: #a5b4fc; margin-bottom: 3px; } .situation-nudge-text span { font-size: 12px; color: var(--text-muted); line-height: 1.5; } .situation-nudge-arrow { font-size: 18px; color: var(--text-muted); flex-shrink: 0; } /* ── Agents auto-start toast ─────────────────────────────────────────────── */ .agents-toast { position: fixed; bottom: 28px; right: 28px; z-index: 9999; display: flex; align-items: flex-start; gap: 12px; background: #1e293b; border: 1px solid #22c55e; border-radius: 12px; padding: 14px 16px; max-width: 360px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .agents-toast--visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .agents-toast-icon { font-size: 20px; flex-shrink: 0; line-height: 1.3; } .agents-toast-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .agents-toast-body strong { font-size: 13px; font-weight: 600; color: #22c55e; } .agents-toast-body span { font-size: 12px; color: #94a3b8; line-height: 1.5; } .agents-toast-close { background: none; border: none; color: #64748b; cursor: pointer; font-size: 13px; padding: 0; flex-shrink: 0; line-height: 1; } .agents-toast-close:hover { color: #94a3b8; } /* ── Markdown rendering inside agent bubbles ─────────────────────────────── */ .md-content p { margin: 0 0 8px 0; } .md-content p:last-child { margin-bottom: 0; } .md-content h1, .md-content h2, .md-content h3, .md-content h4, .md-content h5, .md-content h6 { color: #e2e8f0; font-weight: 600; margin: 12px 0 6px 0; line-height: 1.3; } .md-content h1 { font-size: 15px; } .md-content h2 { font-size: 14px; } .md-content h3, .md-content h4 { font-size: 13px; } .md-content strong { color: #f1f5f9; font-weight: 600; } .md-content em { color: #cbd5e1; font-style: italic; } .md-content ul, .md-content ol { margin: 4px 0 8px 0; padding-left: 20px; } .md-content li { margin-bottom: 3px; line-height: 1.5; } .md-content li:last-child { margin-bottom: 0; } .md-content hr { border: none; border-top: 1px solid #334155; margin: 10px 0; } .md-content blockquote { border-left: 3px solid #4472c4; margin: 8px 0; padding: 4px 12px; color: #94a3b8; font-style: italic; } .md-content code { background: #0f172a; border: 1px solid #1e293b; border-radius: 4px; padding: 1px 5px; font-family: 'Consolas', 'Monaco', monospace; font-size: 11px; color: #7dd3fc; } .md-content pre { background: #0f172a; border: 1px solid #1e293b; border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 8px 0; } .md-content pre code { background: none; border: none; padding: 0; font-size: 11px; color: #e2e8f0; } /* Tables */ .md-content table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; } .md-content thead th { background: #1e3a5f; color: #93c5fd; font-weight: 600; padding: 7px 10px; text-align: left; border-bottom: 1px solid #2d4a6e; } .md-content tbody tr:nth-child(even) { background: #1a2332; } .md-content tbody tr:nth-child(odd) { background: #151f2e; } .md-content tbody tr:hover { background: #1e293b; } .md-content td { padding: 6px 10px; border-bottom: 1px solid #1e293b; color: #cbd5e1; vertical-align: top; } /* Badge for resource agent */ .chat-badge-resource { background: #7c3aed22; color: #a78bfa; border: 1px solid #7c3aed44; } /* Badge for stakeholder agent */ .chat-badge-stakeholder { background: #0d9488; background: #0d948822; color: #2dd4bf; border: 1px solid #0d948844; } /* ── Stale / timed-out message indicator ─────────────────────────────────── */ .chat-thinking--timeout { color: #f59e0b; font-size: 12px; font-style: italic; padding: 8px 12px; background: #1c1a0e; border: 1px solid #78350f; border-radius: 8px; display: inline-block; } /* ── Resource Manager Modal ────────────────────────────────────────────────── */ .btn-outline { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .btn-outline:hover { background: var(--surface3); color: var(--text); border-color: var(--purple); } .rm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .rm-dialog { background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); width: min(820px, 95vw); max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.7); overflow: hidden; } .rm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .rm-title { font-size: 16px; font-weight: 700; color: var(--text); } .rm-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; } .rm-close { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .rm-close:hover { background: var(--surface3); color: var(--text); } .rm-tabs { display: flex; gap: 2px; padding: 10px 20px 0; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; } .rm-tab { padding: 7px 16px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid transparent; border-bottom: none; background: none; color: var(--text-muted); transition: background 0.15s, color 0.15s; } .rm-tab:hover { background: var(--surface2); color: var(--text); } .rm-tab-active { background: var(--surface2); color: var(--text); border-color: var(--border); } .rm-tab-count { display: inline-block; background: var(--surface3); border-radius: 10px; padding: 1px 7px; font-size: 10px; margin-left: 4px; color: var(--text-muted); } .rm-tab-content { flex: 1; overflow-y: auto; padding: 16px 20px; } .rm-tab-content-active { display: block !important; } .rm-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rm-table th { text-align: left; padding: 6px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); } .rm-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text); } .rm-table tr:last-child td { border-bottom: none; } .rm-table tr:hover td { background: var(--surface3); } .rm-add-details { margin-top: 14px; } .rm-add-btn { font-size: 12px; font-weight: 500; color: var(--purple); cursor: pointer; padding: 4px 8px; border-radius: 6px; user-select: none; display: inline-block; transition: background 0.15s; } .rm-add-btn:hover { background: var(--purple-dim); } .rm-add-details[open] .rm-add-btn { color: var(--text-muted); } .rm-add-form { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 4px; align-items: center; } .rm-input { background: var(--surface3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 10px; font-size: 12px; transition: border-color 0.15s; } .rm-input:focus { outline: none; border-color: var(--purple); } .rm-input-lg { width: 180px; } .rm-input-md { width: 140px; } .rm-input-sm { width: 80px; } .rm-save-btn { padding: 6px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: var(--purple); color: #fff; transition: opacity 0.15s; } .rm-save-btn:hover { opacity: 0.85; } /* Override badge — yellow pill shown when user has pinned a value */ .ovr-badge { display: inline-flex; align-items: center; gap: 3px; background: var(--yellow-dim); color: var(--yellow); border: 1px solid var(--yellow); border-radius: 10px; padding: 2px 7px; font-size: 11px; font-weight: 600; white-space: nowrap; } .rm-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } /* ── Document Template Cards (Settings → Preferences) ───────────────────── */ .tmpl-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; } .tmpl-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .tmpl-card-title { font-size: 13px; font-weight: 600; color: var(--text); } .tmpl-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; } .tmpl-badge-set { background: #16423022; color: var(--green); border: 1px solid #16423044; } .tmpl-badge-none { background: var(--surface3); color: var(--text-muted); border: 1px solid var(--border); } .tmpl-file-info { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 12px; } .tmpl-filename { color: var(--text); } .tmpl-date { color: var(--text-muted); } .tmpl-upload-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tmpl-file-label { display: flex; align-items: center; cursor: pointer; } .tmpl-file-input { display: none; } .tmpl-choose-btn { font-size: 12px; padding: 5px 12px; background: var(--surface3); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; transition: border-color .15s; } .tmpl-file-label:has(.tmpl-file-input[value]) .tmpl-choose-btn, .tmpl-file-label:focus-within .tmpl-choose-btn { border-color: var(--accent); color: var(--text); } /* ── Template card footer — sample link + history ────────────────────────── */ .tmpl-footer { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 2px; border-top: 1px solid var(--border); margin-top: 10px; } .tmpl-sample-link { font-size: 12px; color: var(--purple); text-decoration: none; opacity: 0.8; width: fit-content; } .tmpl-sample-link:hover { opacity: 1; text-decoration: underline; } .tmpl-dl-btn { font-size: 11px; color: var(--purple); text-decoration: none; padding: 2px 7px; border: 1px solid var(--purple-dim); border-radius: 4px; white-space: nowrap; margin-left: auto; } .tmpl-dl-btn:hover { background: var(--purple-dim); } /* History */ .tmpl-history-details { margin-top: 2px; } .tmpl-history-toggle { font-size: 12px; color: var(--text-muted); cursor: pointer; list-style: none; user-select: none; } .tmpl-history-toggle::-webkit-details-marker { display: none; } .tmpl-history-toggle:hover { color: var(--text); } .tmpl-history-list { padding: 8px 0 0 2px; } .tmpl-history-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tmpl-history-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); } .tmpl-history-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .tmpl-history-dates { font-size: 11px; color: var(--text-dim); white-space: nowrap; } .tmpl-history-empty { font-size: 12px; color: var(--text-dim); margin: 4px 0 0; } /* ── Action Summary — single tabbed panel ───────────────────── */ /* Panel header row containing the tab buttons */ .as-panel-header { display: flex; align-items: center; gap: 0; padding: 0 16px 0 0; min-height: 44px; flex-shrink: 0; } /* Tab button strip */ .as-tabs { display: flex; align-items: stretch; gap: 0; flex: 1; } .as-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 44px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; outline: none; } .as-tab-btn:hover { color: var(--text); } .as-tab-btn.active { color: var(--text); border-bottom-color: var(--pink); } .as-tab-btn.as-tab-morning.active { border-bottom-color: #f59e0b; } .as-tab-btn.as-tab-risk.active { border-bottom-color: var(--red); } .as-tab-btn.as-tab-updates.active { border-bottom-color: var(--purple); } /* Tab content area — scrollable, fixed height */ .as-tab-content { height: 480px; overflow-y: auto; overflow-x: hidden; padding: 6px 0 12px; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } .as-tab-content::-webkit-scrollbar { width: 5px; } .as-tab-content::-webkit-scrollbar-track { background: transparent; } .as-tab-content::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; } .as-tab-content::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ── Operation entry inside a column ────────────────────────── */ .as-op { border-left: 3px solid var(--border); margin: 3px 12px; border-radius: 0 8px 8px 0; background: var(--surface2); /* no overflow:hidden — text must render fully, panel body handles scroll */ } .as-op-morning { border-left-color: #f59e0b; } .as-op-risk { border-left-color: var(--red); } .as-op-update { border-left-color: var(--purple); } /* Compact meta row: project pill + timestamp */ .as-op-meta { display: flex; align-items: center; gap: 6px; padding: 6px 10px 5px; background: var(--surface3); flex-wrap: wrap; } .as-op-kind { font-size: 11px; font-weight: 600; color: var(--text-muted); } .as-op-project { font-size: 11px; background: var(--blue-dim); color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent); border-radius: 10px; padding: 1px 7px; } .as-op-time { margin-left: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; } /* Response rows stacked inside each op */ .as-responses { display: flex; flex-direction: column; } .as-response { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px 11px; border-top: 1px solid var(--border); background: var(--surface); } .as-response:first-child { border-top: none; } /* Agent badge — mirrors .ab-step-agent-badge */ .as-agent-badge { display: inline-flex; align-items: center; align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px; padding: 2px 7px; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface2); } .as-agent-pm { color: var(--pink); background: var(--pink-dim); border-color: color-mix(in srgb, var(--pink) 30%, transparent); } .as-agent-risk { color: var(--orange); background: var(--orange-dim); border-color: color-mix(in srgb, var(--orange) 30%, transparent); } .as-agent-resource { color: var(--blue); background: var(--blue-dim); border-color: color-mix(in srgb, var(--blue) 30%, transparent); } .as-agent-stakeholder { color: var(--purple); background: var(--purple-dim); border-color: color-mix(in srgb, var(--purple) 30%, transparent); } /* Response body text — full render, no clipping */ .as-response-text { font-size: 12.5px; line-height: 1.65; color: var(--text); min-width: 0; word-break: break-word; white-space: normal; /* normal wrap, not pre-wrap */ overflow: visible; /* never clip mid-sentence */ } .as-response-text p { margin: 0 0 5px; } .as-response-text p:last-child { margin-bottom: 0; } .as-response-text ul, .as-response-text ol { margin: 3px 0 7px 18px; padding: 0; } .as-response-text li { margin-bottom: 2px; } .as-response-text strong { color: var(--text); font-weight: 600; } .as-response-text h1, .as-response-text h2, .as-response-text h3 { font-size: 12.5px; font-weight: 700; margin: 6px 0 3px; } /* Empty state inside a column */ .as-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; color: var(--text-dim); font-size: 12px; text-align: center; } .as-empty-icon { font-size: 28px; opacity: 0.4; } /* ═══════════════════════════════════════════════════════════════════════════ Context Agent — .ctx-* classes ═══════════════════════════════════════════════════════════════════════════ */ /* ── Current Situation panel (Home page) ──────────────────────────────── */ .ctx-sit-body { padding: 16px 20px 20px; font-size: 13px; line-height: 1.7; color: var(--text); } .ctx-sit-body h2, .ctx-sit-body h3 { font-size: 13px; font-weight: 700; margin: 14px 0 4px; color: var(--text); } .ctx-sit-body h2:first-child, .ctx-sit-body h3:first-child { margin-top: 0; } .ctx-sit-body p { margin: 0 0 8px; } .ctx-sit-body ul, .ctx-sit-body ol { margin: 4px 0 8px 18px; padding: 0; } .ctx-sit-body li { margin-bottom: 3px; } .ctx-sit-body strong { color: var(--text); font-weight: 600; } .ctx-sit-sources { font-size: 11px; color: var(--text-dim); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .ctx-sit-ts { font-size: 11px; color: var(--text-dim); margin-left: 8px; } .ctx-sit-badge { font-size: 10px; background: var(--cyan-dim); color: var(--cyan); padding: 2px 6px; border-radius: 10px; margin-left: 6px; } .ctx-refresh-btn { margin-left: auto; font-size: 11px; color: var(--cyan); background: none; border: 1px solid var(--cyan-dim); border-radius: 4px; padding: 2px 8px; cursor: pointer; } .ctx-refresh-btn:hover { background: var(--cyan-dim); } .ctx-sit-empty { display: flex; align-items: flex-start; gap: 12px; padding: 24px 20px; color: var(--text-dim); font-size: 13px; line-height: 1.6; } .ctx-sit-empty-icon { font-size: 20px; flex-shrink: 0; } .ctx-sit-empty a { color: var(--cyan); text-decoration: none; } .ctx-sit-empty a:hover { text-decoration: underline; } /* ── Context Chat page layout ─────────────────────────────────────────── */ .ctx-page-layout { display: flex; gap: 16px; padding: 0 24px 24px; height: calc(100vh - 120px); min-height: 0; } .ctx-chat-column { flex: 1.2; min-width: 0; display: flex; flex-direction: column; } .ctx-activity-column { flex: 0.8; min-width: 280px; display: flex; flex-direction: column; } .ctx-chat-panel, .ctx-activity-panel { display: flex; flex-direction: column; height: calc(100vh - 160px); min-height: 0; } /* ── Conversation chip bar ────────────────────────────────────────────── */ .ctx-conv-bar { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; flex-shrink: 0; } .ctx-conv-chip { font-size: 11px; padding: 3px 10px; border-radius: 12px; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border); background: var(--surface2); cursor: pointer; white-space: nowrap; } .ctx-conv-chip:hover { background: var(--surface3); color: var(--text); } .ctx-conv-chip.active { background: var(--cyan-dim); color: var(--cyan); border-color: var(--cyan-dim); } .ctx-conv-new { background: none; color: var(--cyan); border-color: var(--cyan-dim); } /* ── Messages area ────────────────────────────────────────────────────── */ .ctx-messages-area { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; } /* ── Chat bubbles ─────────────────────────────────────────────────────── */ .ctx-msg { display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-start; } .ctx-msg-user { flex-direction: row-reverse; } .ctx-bubble { max-width: 85%; font-size: 13px; line-height: 1.6; padding: 8px 12px; border-radius: 10px; } .ctx-bubble p { margin: 0 0 5px; } .ctx-bubble p:last-child { margin-bottom: 0; } .ctx-bubble ul, .ctx-bubble ol { margin: 4px 0 6px 16px; padding: 0; } .ctx-bubble li { margin-bottom: 2px; } .ctx-bubble h2, .ctx-bubble h3 { font-size: 13px; font-weight: 700; margin: 10px 0 3px; } .ctx-bubble h2:first-child, .ctx-bubble h3:first-child { margin-top: 0; } .ctx-bubble-user { background: var(--cyan-dim); color: var(--text); border-radius: 10px 10px 2px 10px; } .ctx-bubble-agent { background: var(--surface2); color: var(--text); border-radius: 10px 10px 10px 2px; } .ctx-avatar { font-size: 18px; flex-shrink: 0; margin-top: 2px; } .ctx-thinking { opacity: 0.6; font-style: italic; font-size: 12px; } /* ── Input row ────────────────────────────────────────────────────────── */ .ctx-input-row { display: flex; gap: 8px; align-items: flex-end; } .ctx-input { flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); resize: none; font-size: 13px; font-family: inherit; } .ctx-input:focus { outline: none; border-color: var(--cyan); } /* ── Context Activity Board ───────────────────────────────────────────── */ .ctx-activity-body { flex: 1; overflow-y: auto; padding: 4px 0; min-height: 0; } .ctx-activity-response { margin: 8px; padding: 10px 12px; background: var(--cyan-dim); border-radius: 6px; border-left: 3px solid var(--cyan); } .ctx-activity-response-label { font-size: 10px; color: var(--cyan); font-weight: 700; letter-spacing: 0.05em; margin-bottom: 4px; } .ctx-activity-response-text { font-size: 12px; color: var(--text); line-height: 1.5; } .ctx-activity-op-start { margin: 6px 8px; padding: 4px 8px; font-size: 11px; color: var(--text-dim); text-align: center; } /* ── Context conversation chip with archive button ────────────────────── */ .ctx-conv-chip-wrap { display: flex; align-items: center; gap: 0; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); overflow: hidden; } .ctx-conv-chip-wrap:hover { background: var(--surface3); } .ctx-conv-chip-wrap.active { background: var(--cyan-dim); border-color: var(--cyan-dim); } /* When inside a wrap, the chip itself loses its own border/background */ .ctx-conv-chip-wrap .ctx-conv-chip { border: none; background: none; border-radius: 0; padding: 3px 6px 3px 10px; } .ctx-conv-chip-wrap .ctx-conv-chip:hover { background: none; } .ctx-conv-chip-wrap.active .ctx-conv-chip { color: var(--cyan); } .ctx-conv-archive-btn { display: none; /* hidden until hover */ background: none; border: none; padding: 3px 7px 3px 3px; color: var(--text-dim); cursor: pointer; font-size: 10px; line-height: 1; border-radius: 0 12px 12px 0; } .ctx-conv-chip-wrap:hover .ctx-conv-archive-btn { display: block; } .ctx-conv-archive-btn:hover { color: var(--red); background: var(--red-dim); } /* ── Context page sub-tabs ────────────────────────────────────────────── */ .ctx-subtabs { display: flex; gap: 4px; padding: 0 24px 0; border-bottom: 1px solid var(--border); margin-bottom: 0; } .ctx-subtab { font-size: 13px; font-weight: 500; padding: 8px 16px; border: none; background: none; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; /* overlap the border-bottom of .ctx-subtabs */ transition: color 0.15s, border-color 0.15s; } .ctx-subtab:hover { color: var(--text); } .ctx-subtab.active { color: var(--cyan); border-bottom-color: var(--cyan); } .ctx-tab-content { display: none; } .ctx-tab-content.active { display: block; } /* ── Transcript form inputs ───────────────────────────────────────────── */ .ctx-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; letter-spacing: 0.02em; } .ctx-form-input { width: 100%; padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; font-family: inherit; } .ctx-form-input:focus { outline: none; border-color: var(--cyan); } .ctx-transcript-area { resize: vertical; min-height: 180px; line-height: 1.6; } /* ── Transcript tab 2-column layout ──────────────────────────────────── */ .ctx-transcript-layout { display: flex; gap: 16px; padding: 0 24px 24px; height: calc(100vh - 160px); min-height: 0; } .ctx-transcript-form-col { flex: 0 0 420px; min-width: 320px; display: flex; flex-direction: column; } .ctx-transcript-history-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ── Transcript history table ─────────────────────────────────────────── */ .ctx-history-table { width: 100%; border-collapse: collapse; font-size: 12px; } .ctx-history-table thead tr { border-bottom: 1px solid var(--border); } .ctx-history-table th { padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; white-space: nowrap; } .ctx-history-row { border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background 0.1s; } .ctx-history-row:hover { background: var(--surface2); } .ctx-history-row td { padding: 9px 12px; vertical-align: middle; } .ctx-history-title { font-weight: 500; color: var(--text); max-width: 180px; } .ctx-history-project { white-space: nowrap; } .ctx-history-date, .ctx-history-ts { color: var(--text-muted); white-space: nowrap; font-size: 11px; } .ctx-project-tag { display: inline-block; font-size: 10px; padding: 2px 7px; background: var(--cyan-dim); color: var(--cyan); border-radius: 10px; white-space: nowrap; } .ctx-status-badge { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 10px; white-space: nowrap; font-weight: 500; } .ctx-status-done { background: var(--green-dim); color: var(--green); } .ctx-status-pending { background: var(--yellow-dim); color: var(--yellow); } /* ── Transcript detail panel ──────────────────────────────────────────── */ .ctx-detail-header { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .ctx-detail-back { background: var(--surface2); border: 1px solid var(--border); color: var(--cyan); font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .ctx-detail-back:hover { background: var(--surface3); } .ctx-detail-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 5px; } .ctx-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--text-muted); align-items: center; } .ctx-detail-section { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); } .ctx-detail-section-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: 8px; display: block; } .ctx-detail-summary { font-size: 12.5px; line-height: 1.7; color: var(--text); } .ctx-detail-summary p { margin: 0 0 6px; } .ctx-detail-summary ul { margin: 4px 0 8px 16px; padding: 0; } .ctx-detail-summary li { margin-bottom: 3px; } .ctx-detail-summary h2, .ctx-detail-summary h3 { font-size: 12.5px; font-weight: 700; margin: 10px 0 3px; } .ctx-action-table { width: 100%; border-collapse: collapse; font-size: 12px; } .ctx-action-table th { padding: 4px 10px; text-align: left; font-size: 11px; color: var(--text-muted); border-bottom: 1px solid var(--border); } .ctx-action-table td { padding: 5px 10px; vertical-align: top; } .ctx-action-table tr:nth-child(even) { background: rgba(255,255,255,0.02); } .ctx-raw-transcript { margin-top: 10px; padding: 12px 14px; background: var(--surface2); border-radius: 6px; font-size: 11px; line-height: 1.6; color: var(--text-muted); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow-y: auto; } /* ========================================================= Login page ========================================================= */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); padding: 24px; } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 48px 40px 40px; width: 100%; max-width: 400px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.45); } .login-logo { margin-bottom: 20px; } .login-title { font-size: 26px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.5px; } .login-sub { font-size: 14px; color: var(--text-dim); margin: 0 0 32px; line-height: 1.5; } .login-google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 13px 20px; border-radius: 10px; background: #fff; color: #1f1f1f; font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid #dadce0; transition: box-shadow 0.15s, background 0.15s; box-sizing: border-box; } .login-google-btn:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.25); background: #f8f8f8; } .login-divider { display: flex; align-items: center; margin: 28px 0 20px; gap: 12px; font-size: 11px; color: var(--text-dim); } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .login-features { display: flex; flex-direction: column; gap: 12px; text-align: left; } .login-feature-item { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--text-dim); line-height: 1.45; } .login-feature-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; } /* Setup notice (shown when GOOGLE_CLIENT_ID not set) */ .login-setup-notice { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: left; margin-top: 8px; } .login-setup-icon { font-size: 28px; margin-bottom: 10px; } .login-setup-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; } .login-setup-body { font-size: 13px; color: var(--text-dim); line-height: 1.6; } .login-setup-code { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 12px; margin: 10px 0; color: var(--cyan); white-space: pre; } .login-setup-link { color: var(--cyan); text-decoration: none; font-size: 13px; } .login-setup-link:hover { text-decoration: underline; } /* ========================================================= Onboarding wizard ========================================================= */ /* ── Full-page onboarding layout ──────────────────────────────────────────── */ .onb-body { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); overflow-y: auto; } .onb-container { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0; } /* Top progress bar — full width stripe */ .onb-topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 48px 10px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; z-index: 10; } .onb-brand { font-size: 12px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; margin-bottom: 0; } .onb-brand-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; } /* Progress bar */ .onb-progress { display: flex; align-items: center; gap: 0; width: 100%; max-width: 560px; } .onb-step-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; background: var(--surface2); color: var(--text-dim); border: 2px solid var(--border); transition: all 0.2s; } .onb-step-dot.onb-active { background: var(--cyan); color: #000; border-color: var(--cyan); } .onb-step-dot.onb-done { background: transparent; color: var(--cyan); border-color: var(--cyan-dim); } .onb-step-line { flex: 1; height: 2px; background: var(--border); max-width: 100px; transition: background 0.2s; } .onb-step-line.onb-done { background: var(--cyan-dim); } .onb-step-labels { display: flex; gap: 0; max-width: 560px; font-size: 11px; color: var(--text-dim); } .onb-step-labels span { flex: 1; text-align: center; } .onb-step-labels span:first-child { text-align: left; } .onb-step-labels span:last-child { text-align: right; } .onb-step-labels .onb-label-active { color: var(--cyan); font-weight: 600; } /* Main content area — fills remaining vertical space */ .onb-content { flex: 1; display: flex; flex-direction: column; padding: 24px 48px 40px; overflow-y: auto; } /* Card — full width, no max-width */ .onb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px 32px; text-align: center; width: 100%; box-sizing: border-box; } .onb-card-wide { text-align: left; } .onb-card-scroll { overflow: visible; } .onb-icon { font-size: 28px; margin-bottom: 8px; } .onb-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; } .onb-sub { font-size: 12px; color: var(--text-dim); margin: 0 0 20px; line-height: 1.6; } .onb-optional { font-size: 12px; color: var(--text-dim); font-weight: 400; } .onb-required { color: var(--red); } /* Welcome step (step 1) — full-page two-column */ .onb-welcome-layout { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: center; min-height: calc(100vh - 160px); width: 100%; } .onb-welcome-hero { display: flex; flex-direction: column; gap: 12px; } .onb-welcome-emoji { font-size: 38px; line-height: 1; } .onb-welcome-title { font-size: 24px; font-weight: 800; margin: 0; line-height: 1.2; } .onb-welcome-sub { font-size: 12px; color: var(--text-dim); line-height: 1.65; margin: 0; } .onb-btn-welcome { padding: 10px 24px; font-size: 13px; width: fit-content; margin-top: 6px; } .onb-welcome-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .onb-feature-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 14px; transition: border-color 0.15s; } .onb-feature-card:hover { border-color: var(--cyan-dim); } .onb-feature-card-icon { font-size: 18px; flex-shrink: 0; width: 36px; height: 36px; background: var(--surface2); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .onb-feature-card-title { font-size: 12px; font-weight: 700; margin-bottom: 4px; } .onb-feature-card-desc { font-size: 11px; color: var(--text-dim); line-height: 1.55; } /* Feature list (legacy — kept for safety) */ .onb-features { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; text-align: left; } .onb-feature { display: flex; gap: 14px; align-items: flex-start; } .onb-feature-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; } .onb-feature b { display: block; font-size: 14px; margin-bottom: 3px; } .onb-feature span { font-size: 13px; color: var(--text-dim); line-height: 1.5; } /* Forms */ .onb-form { display: flex; flex-direction: column; gap: 14px; } .onb-label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text); } .onb-input { padding: 8px 10px; border-radius: 7px; font-size: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); outline: none; width: 100%; box-sizing: border-box; transition: border-color 0.15s; } .onb-input:focus { border-color: var(--cyan); } select.onb-input { cursor: pointer; } .onb-hint { font-size: 10px; color: var(--text-dim); font-weight: 400; margin-top: 2px; } .onb-link { color: var(--cyan); text-decoration: none; } .onb-link:hover { text-decoration: underline; } /* Key groups (step 3) */ .onb-key-group { display: flex; flex-direction: column; gap: 14px; } .onb-key-header { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* Sub-tabs (step 3 API keys) */ .onb-tabs { display: flex; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 20px; } .onb-tab { flex: 1; padding: 6px 8px; border-radius: 6px; border: none; background: transparent; color: var(--text-dim); font-size: 11px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .onb-tab:hover { background: var(--surface3); color: var(--text); } .onb-tab.onb-tab-active { background: var(--surface); color: var(--cyan); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .onb-tab-panel { display: flex; flex-direction: column; gap: 12px; min-height: 160px; } .onb-tab-desc { font-size: 11px; color: var(--text-dim); line-height: 1.55; padding: 8px 10px; background: var(--surface2); border-radius: 6px; border-left: 3px solid var(--cyan-dim); margin-bottom: 12px; } .onb-subtool-header { font-size: 11px; font-weight: 700; color: var(--text); padding-bottom: 5px; border-bottom: 1px solid var(--border); } .onb-hint-inline { font-size: 10px; color: var(--text-dim); font-weight: 400; margin-left: 6px; } /* Actions row */ .onb-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .onb-back { font-size: 12px; color: var(--text-dim); text-decoration: none; padding: 4px 0; } .onb-back:hover { color: var(--text); } .onb-skip { font-size: 12px; color: var(--text-dim); text-decoration: none; margin-left: auto; padding: 4px 0; } .onb-skip:hover { color: var(--text); } .onb-btn { padding: 8px 20px; font-size: 12px; margin-left: auto; white-space: nowrap; } .onb-btn-launch { width: 100%; margin: 0; padding: 12px; font-size: 14px; font-weight: 700; } /* Scrollable card — page scrolls, card doesn't clip */ .onb-card-scroll { overflow: visible; } /* Two-column layout (step 2) — fills full content width */ .onb-two-col { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; width: 100%; } .onb-col-form { text-align: left; } /* Info panel (step 2 right column) */ .onb-info-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px; box-shadow: 0 4px 20px rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 14px; } .onb-info-header { font-size: 11px; font-weight: 700; color: var(--cyan); padding-bottom: 10px; border-bottom: 1px solid var(--border); letter-spacing: 0.03em; } .onb-info-items { display: flex; flex-direction: column; gap: 14px; } .onb-info-item { display: flex; flex-direction: column; gap: 4px; } .onb-info-field { font-size: 10px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.05em; } .onb-info-desc { font-size: 11px; color: var(--text-dim); line-height: 1.6; } .onb-info-note { display: flex; gap: 8px; align-items: flex-start; background: var(--surface2); border-radius: 7px; padding: 8px 10px; font-size: 10px; color: var(--text-dim); line-height: 1.5; margin-top: auto; } .onb-info-note-icon { font-size: 11px; flex-shrink: 0; margin-top: 1px; } /* Introduction grid (step 4) — 3 columns, full width */ .onb-intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .onb-intro-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 14px; transition: border-color 0.15s; } .onb-intro-card:hover { border-color: var(--cyan-dim); } .onb-intro-icon { font-size: 17px; flex-shrink: 0; width: 30px; height: 30px; background: var(--surface3); border-radius: 7px; display: flex; align-items: center; justify-content: center; } .onb-intro-body { display: flex; flex-direction: column; gap: 3px; } .onb-intro-title { font-size: 12px; font-weight: 700; color: var(--text); } .onb-intro-desc { font-size: 11px; color: var(--text-dim); line-height: 1.55; } /* Tip box */ .onb-tip { display: flex; gap: 10px; align-items: flex-start; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 11px; line-height: 1.5; } .onb-tip-icon { font-size: 14px; flex-shrink: 0; } /* Tour grid (legacy — kept for safety) */ .onb-tour-grid { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; } .onb-tour-item { display: flex; gap: 16px; align-items: flex-start; } .onb-tour-num { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--cyan-dim); color: var(--cyan); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .onb-tour-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .onb-tour-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; } /* ══════════════════════════════════════════════════════════════════════════════ PORTFOLIO ANALYTICS (.anl-* namespace) ══════════════════════════════════════════════════════════════════════════════ */ /* Section divider with centred label */ .anl-section-divider { display: flex; align-items: center; gap: 12px; margin: 32px 0 20px; padding: 0 4px; } .anl-section-divider::before, .anl-section-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .anl-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } /* Header row: label left, timestamp + button right */ .anl-header-row { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 16px; gap: 12px; } .anl-ts { font-size: 11px; color: var(--text-dim); } .anl-regen-btn { font-size: 11px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-dim); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .anl-regen-btn:hover { color: var(--cyan); border-color: var(--cyan); } /* Two-column grid for first row of charts */ .anl-charts-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-bottom: 16px; } /* Single full-width row */ .anl-charts-grid-full { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; } /* Individual chart panel (surface card) */ .anl-chart-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; } .anl-chart-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; } /* Canvas wrapper — height set inline per chart; canvas fills it */ .anl-chart-wrap { position: relative; width: 100%; } .anl-chart-wrap canvas { display: block; } /* Custom HTML legend */ .anl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; } .anl-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); } .anl-legend-sq { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } /* AI Insights prose panel */ .anl-insights-body { padding: 16px 20px; font-size: 13px; line-height: 1.6; color: var(--text); } .anl-insights-body h2, .anl-insights-body h3 { color: var(--cyan); font-size: 13px; font-weight: 700; margin: 16px 0 6px; } .anl-insights-body h2:first-child, .anl-insights-body h3:first-child { margin-top: 0; } .anl-insights-body ul { padding-left: 20px; margin: 6px 0 12px; } .anl-insights-body li { margin-bottom: 4px; } .anl-insights-body p { margin: 0 0 10px; } /* Empty / placeholder state */ .anl-empty { padding: 40px 24px; text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.6; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; } .anl-empty-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .anl-gen-btn { display: inline-block; margin-top: 16px; padding: 8px 18px; border: 1px solid var(--cyan); border-radius: 6px; background: transparent; color: var(--cyan); font-size: 12px; cursor: pointer; transition: background 0.15s; } .anl-gen-btn:hover { background: var(--cyan-dim); } @media (max-width: 768px) { .anl-charts-grid { grid-template-columns: 1fr; } } /* ====================================================================== SETUP BANNER (shown in base.html until required platforms configured) ====================================================================== */ .setup-banner { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: color-mix(in srgb, var(--cyan) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); font-size: 12.5px; color: var(--text); position: sticky; top: 0; z-index: 50; } .setup-banner svg { color: var(--cyan); } .setup-banner-text { flex: 1; } .setup-banner-text a { color: var(--cyan); text-decoration: underline; } .setup-banner-btn { padding: 4px 12px; border: 1px solid var(--cyan); border-radius: 5px; color: var(--cyan); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background 0.15s; } .setup-banner-btn:hover { background: color-mix(in srgb, var(--cyan) 15%, transparent); } .setup-banner-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 2px 4px; line-height: 1; flex-shrink: 0; } .setup-banner-close:hover { color: var(--text); } /* ====================================================================== SETUP GUIDE PAGE (.sg-*) ====================================================================== */ .sg-container { max-width: 780px; margin: 0 auto; padding: 32px 24px 60px; } .sg-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; } .sg-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 6px; } .sg-subtitle { font-size: 13px; color: var(--text-dim); margin: 0; } .sg-skip { font-size: 12px; color: var(--text-dim); text-decoration: none; margin-top: 6px; white-space: nowrap; } .sg-skip:hover { color: var(--text); } .sg-progress-wrap { margin-bottom: 32px; } .sg-progress-bar-track { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; margin-bottom: 8px; } .sg-progress-bar-fill { height: 100%; background: var(--cyan); border-radius: 99px; transition: width 0.4s ease; } .sg-progress-label { font-size: 12px; color: var(--text-dim); text-align: right; } .sg-progress-done { font-weight: 700; color: var(--text); } .sg-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 20px; overflow: hidden; } .sg-section-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: color-mix(in srgb, var(--border) 40%, transparent); border-bottom: 1px solid var(--border); } .sg-section-check { display: flex; align-items: center; gap: 10px; cursor: default; } .sg-section-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--cyan); cursor: default; } .sg-section-title { font-size: 13px; font-weight: 600; color: var(--text); } .sg-section-meta { display: flex; align-items: center; gap: 10px; } .sg-section-count { font-size: 12px; font-weight: 600; color: var(--text-dim); } .sg-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; } .sg-badge--required { background: color-mix(in srgb, var(--cyan) 15%, transparent); color: var(--cyan); } .sg-badge--recommended { background: color-mix(in srgb, #639922 15%, transparent); color: #639922; } .sg-platform { border-bottom: 1px solid var(--border); } .sg-platform:last-child { border-bottom: none; } .sg-platform--done .sg-platform-header { opacity: 0.7; } .sg-platform--soon { opacity: 0.5; pointer-events: none; } .sg-platform-header { display: flex; align-items: center; padding: 14px 18px; cursor: pointer; gap: 10px; user-select: none; } .sg-platform-header:hover { background: color-mix(in srgb, var(--border) 30%, transparent); } .sg-platform-check { display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; } .sg-platform-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--cyan); flex-shrink: 0; cursor: default; } .sg-plat-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; color: #fff; } .sg-plat-icon--monday { background: #f2511b; } .sg-plat-icon--clickup { background: #7b68ee; } .sg-plat-icon--jira { background: #0052cc; } .sg-plat-icon--smartsheet { background: #00a86b; } .sg-plat-icon--notion { background: #fff; border: 1px solid #e0e0e0; } .sg-plat-icon--slack { background: #4a154b; } .sg-plat-icon--email { background: #555; } .sg-plat-icon--whatsapp { background: #25d366; } .sg-plat-icon--tavily { background: #1e1e2e; font-size: 11px; } .sg-plat-name { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; } .sg-plat-desc { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; } .sg-configured-pill { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, #639922 15%, transparent); color: #639922; text-transform: uppercase; white-space: nowrap; } .sg-coming-soon-pill { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--border); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; } .sg-expand-btn { font-size: 13px; color: var(--text-dim); flex-shrink: 0; } .sg-steps { padding: 0 18px 16px 60px; display: flex; flex-direction: column; } .sg-steps--collapsed { display: none; } .sg-step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .sg-step:last-child { border-bottom: none; } .sg-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--border); color: var(--text-dim); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .sg-step-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .sg-step-body { font-size: 12px; color: var(--text-dim); line-height: 1.55; } .sg-step-body code { background: var(--border); padding: 1px 4px; border-radius: 3px; font-size: 11px; } .sg-step-link { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--cyan); text-decoration: none; } .sg-step-link:hover { text-decoration: underline; } .sg-step-cta { display: inline-block; margin-top: 8px; padding: 5px 14px; border: 1px solid var(--cyan); border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--cyan); text-decoration: none; transition: background 0.15s; } .sg-step-cta:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); } .sg-complete-cta { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 14px 18px; background: color-mix(in srgb, #639922 12%, transparent); border: 1px solid color-mix(in srgb, #639922 30%, transparent); border-radius: 10px; font-size: 13px; color: var(--text); } .sg-complete-cta svg { color: #639922; flex-shrink: 0; } .sg-complete-cta a { color: var(--cyan); font-weight: 600; } @media (max-width: 600px) { .sg-container { padding: 16px 12px 40px; } .sg-steps { padding-left: 18px; } .sg-section-meta { flex-direction: column; align-items: flex-end; gap: 4px; } } /* ====================================================================== SETUP BANNER (shown in base.html until required platforms configured) ====================================================================== */ .setup-banner { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: color-mix(in srgb, var(--cyan) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); font-size: 12.5px; color: var(--text); position: sticky; top: 0; z-index: 50; } .setup-banner svg { color: var(--cyan); } .setup-banner-text { flex: 1; } .setup-banner-text a { color: var(--cyan); text-decoration: underline; } .setup-banner-btn { padding: 4px 12px; border: 1px solid var(--cyan); border-radius: 5px; color: var(--cyan); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background 0.15s; } .setup-banner-btn:hover { background: color-mix(in srgb, var(--cyan) 15%, transparent); } .setup-banner-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 2px 4px; line-height: 1; flex-shrink: 0; } .setup-banner-close:hover { color: var(--text); } /* ====================================================================== SETUP GUIDE PAGE (.sg-*) ====================================================================== */ .sg-container { max-width: 780px; margin: 0 auto; padding: 32px 24px 60px; } .sg-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; } .sg-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 6px; } .sg-subtitle { font-size: 13px; color: var(--text-dim); margin: 0; } .sg-skip { font-size: 12px; color: var(--text-dim); text-decoration: none; margin-top: 6px; white-space: nowrap; } .sg-skip:hover { color: var(--text); } .sg-progress-wrap { margin-bottom: 32px; } .sg-progress-bar-track { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; margin-bottom: 8px; } .sg-progress-bar-fill { height: 100%; background: var(--cyan); border-radius: 99px; transition: width 0.4s ease; } .sg-progress-label { font-size: 12px; color: var(--text-dim); text-align: right; } .sg-progress-done { font-weight: 700; color: var(--text); } .sg-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 20px; overflow: hidden; } .sg-section-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: color-mix(in srgb, var(--border) 40%, transparent); border-bottom: 1px solid var(--border); } .sg-section-check { display: flex; align-items: center; gap: 10px; cursor: default; } .sg-section-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--cyan); cursor: default; } .sg-section-title { font-size: 13px; font-weight: 600; color: var(--text); } .sg-section-meta { display: flex; align-items: center; gap: 10px; } .sg-section-count { font-size: 12px; font-weight: 600; color: var(--text-dim); } .sg-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; } .sg-badge--required { background: color-mix(in srgb, var(--cyan) 15%, transparent); color: var(--cyan); } .sg-badge--recommended { background: color-mix(in srgb, #639922 15%, transparent); color: #639922; } .sg-platform { border-bottom: 1px solid var(--border); } .sg-platform:last-child { border-bottom: none; } .sg-platform--done .sg-platform-header { opacity: 0.7; } .sg-platform--soon { opacity: 0.5; pointer-events: none; } .sg-platform-header { display: flex; align-items: center; padding: 14px 18px; cursor: pointer; gap: 10px; user-select: none; } .sg-platform-header:hover { background: color-mix(in srgb, var(--border) 30%, transparent); } .sg-platform-check { display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; } .sg-platform-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--cyan); flex-shrink: 0; cursor: default; } .sg-plat-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; color: #fff; } .sg-plat-icon--monday { background: #f2511b; } .sg-plat-icon--clickup { background: #7b68ee; } .sg-plat-icon--jira { background: #0052cc; } .sg-plat-icon--smartsheet { background: #00a86b; } .sg-plat-icon--notion { background: #fff; border: 1px solid #e0e0e0; } .sg-plat-icon--slack { background: #4a154b; } .sg-plat-icon--email { background: #555; } .sg-plat-icon--whatsapp { background: #25d366; } .sg-plat-icon--tavily { background: #1e1e2e; font-size: 11px; } .sg-plat-name { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; } .sg-plat-desc { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; } .sg-configured-pill { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, #639922 15%, transparent); color: #639922; text-transform: uppercase; white-space: nowrap; } .sg-coming-soon-pill { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--border); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; } .sg-expand-btn { font-size: 13px; color: var(--text-dim); flex-shrink: 0; } .sg-steps { padding: 0 18px 16px 60px; display: flex; flex-direction: column; } .sg-steps--collapsed { display: none; } .sg-step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .sg-step:last-child { border-bottom: none; } .sg-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--border); color: var(--text-dim); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .sg-step-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .sg-step-body { font-size: 12px; color: var(--text-dim); line-height: 1.55; } .sg-step-body code { background: var(--border); padding: 1px 4px; border-radius: 3px; font-size: 11px; } .sg-step-link { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--cyan); text-decoration: none; } .sg-step-link:hover { text-decoration: underline; } .sg-step-cta { display: inline-block; margin-top: 8px; padding: 5px 14px; border: 1px solid var(--cyan); border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--cyan); text-decoration: none; transition: background 0.15s; } .sg-step-cta:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); } .sg-complete-cta { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 14px 18px; background: color-mix(in srgb, #639922 12%, transparent); border: 1px solid color-mix(in srgb, #639922 30%, transparent); border-radius: 10px; font-size: 13px; color: var(--text); } .sg-complete-cta svg { color: #639922; flex-shrink: 0; } .sg-complete-cta a { color: var(--cyan); font-weight: 600; } @media (max-width: 600px) { .sg-container { padding: 16px 12px 40px; } .sg-steps { padding-left: 18px; } .sg-section-meta { flex-direction: column; align-items: flex-end; gap: 4px; } } /* setup-banner-btn is now a