/* Mechanics Portal — White-label brand tokens (overridden at runtime by BrandSettings) */ /* Alpine.js x-cloak: hide elements before Alpine initializes */ [x-cloak] { display: none !important; } /* Font import: overridden by BrandSettings.FontImportUrl at runtime */ :root { /* Brand colors (Apple HIG defaults, overridden by BrandSettings via _Layout.cshtml) */ --primary: #007AFF; --primary-light: #B3D7FF; --primary-dark: #0056B3; /* Computed subtle variants — adapt automatically to injected brand colors */ --primary-subtle: color-mix(in srgb, var(--primary) 6%, transparent); --primary-hover: color-mix(in srgb, var(--primary) 8%, transparent); /* Semantic palette (overridden by BrandSettings) */ --success: #11C322; --success-subtle: color-mix(in srgb, var(--success) 10%, transparent); --warning: #E7BA15; --warning-dark: color-mix(in srgb, var(--warning) 70%, #000); --warning-subtle: color-mix(in srgb, var(--warning) 10%, transparent); --danger: #DC2626; --danger-subtle: color-mix(in srgb, var(--danger) 8%, transparent); --neutral-subtle: rgba(143, 143, 143, 0.08); /* Accessible text for a badge/pill/chip sitting on its matching *-subtle fill. The brand hue (40%) is anchored to --text, so the result clears WCAG AA for small text in BOTH themes — the raw tokens are too light to read as text, and a fixed dark mix fails in dark mode. These are redeclared in the dark blocks below because they carry a different --text. */ --on-primary-subtle: color-mix(in srgb, var(--primary) 40%, var(--text)); --on-success-subtle: color-mix(in srgb, var(--success) 40%, var(--text)); --on-warning-subtle: color-mix(in srgb, var(--warning) 40%, var(--text)); --on-danger-subtle: color-mix(in srgb, var(--danger) 40%, var(--text)); /* Surfaces, Text and Borders are dynamically computed in _Layout.cshtml */ --text-on-primary: #FFFFFF; --border-focus: var(--primary); /* Layout */ --sidebar-width: 260px; --sidebar-width-collapsed: 56px; /* Typography */ --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; /* Border radius (sm, md, lg, xl are dynamically computed in _Layout.cshtml) */ --radius-pill: 20px; --radius-full: 50%; /* Typography — extra-small tier for badges, counts, labels */ --text-2xs: 0.625rem; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; } /* Dark mode — manual toggle (.dark-mode on ) or OS preference as fallback */ html.dark-mode { /* Surfaces, Text and Borders are dynamically computed in _Layout.cshtml */ --border-focus: var(--primary); /* Higher opacity subtle variants for dark backgrounds */ --primary-subtle: color-mix(in srgb, var(--primary) 15%, transparent); --primary-hover: color-mix(in srgb, var(--primary) 12%, transparent); --success-subtle: color-mix(in srgb, var(--success) 15%, transparent); --warning-subtle: color-mix(in srgb, var(--warning) 15%, transparent); --danger-subtle: color-mix(in srgb, var(--danger) 15%, transparent); --neutral-subtle: rgba(143, 143, 143, 0.12); /* Re-anchored to the dark --text (see :root note). */ --on-primary-subtle: color-mix(in srgb, var(--primary) 40%, var(--text)); --on-success-subtle: color-mix(in srgb, var(--success) 40%, var(--text)); --on-warning-subtle: color-mix(in srgb, var(--warning) 40%, var(--text)); --on-danger-subtle: color-mix(in srgb, var(--danger) 40%, var(--text)); } /* OS preference fallback — only when no explicit choice stored */ @media (prefers-color-scheme: dark) { html:not(.light-mode) { /* Surfaces, Text and Borders are dynamically computed in _Layout.cshtml */ --border-focus: var(--primary); --primary-subtle: color-mix(in srgb, var(--primary) 15%, transparent); --primary-hover: color-mix(in srgb, var(--primary) 12%, transparent); --success-subtle: color-mix(in srgb, var(--success) 15%, transparent); --warning-subtle: color-mix(in srgb, var(--warning) 15%, transparent); --danger-subtle: color-mix(in srgb, var(--danger) 15%, transparent); --neutral-subtle: rgba(143, 143, 143, 0.12); --on-primary-subtle: color-mix(in srgb, var(--primary) 40%, var(--text)); --on-success-subtle: color-mix(in srgb, var(--success) 40%, var(--text)); --on-warning-subtle: color-mix(in srgb, var(--warning) 40%, var(--text)); --on-danger-subtle: color-mix(in srgb, var(--danger) 40%, var(--text)); } } /* Skip-to-content — WCAG 2.4.1 */ .skip-link { position: absolute; top: 16px; left: 16px; z-index: 3000; padding: 8px 16px; background: var(--primary); color: var(--text-on-primary); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transform: translateY(-200%); transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-primary); font-size: var(--text-base); line-height: 1.5; background: var(--bg-alt); color: var(--text); height: 100vh; height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Shell */ .portal-shell { display: flex; height: 100vh; height: 100dvh; } /* Sidebar — Rams: less, but better */ .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; } .sidebar-brand { padding: 16px 16px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .brand-logo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; color: var(--primary); } .brand-logo svg { width: 100%; height: 100%; } /* Dark mode logo toggle — swap light/dark logo variants */ .logo-dark { display: none; } html.dark-mode .logo-light { display: none; } html.dark-mode .logo-dark { display: inline-flex; } @media (prefers-color-scheme: dark) { html:not(.light-mode) .logo-light { display: none; } html:not(.light-mode) .logo-dark { display: inline-flex; } } .brand-subtitle { font-size: var(--text-sm); color: var(--text); font-weight: 700; letter-spacing: -0.01em; } .sidebar-nav { list-style: none; padding: 8px 10px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; } /* Home link — visually detached from groups */ .sidebar-nav > li:first-child { margin-bottom: 4px; } .sidebar-nav li a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-md); transition: background 0.12s ease, color 0.12s ease; } .sidebar-nav li a svg { flex-shrink: 0; opacity: 0.45; transition: opacity 0.12s ease; } .sidebar-nav li a:hover svg { opacity: 0.7; } .sidebar-nav li a.active svg { opacity: 1; } .sidebar-nav li a:hover { background: var(--primary-hover); color: var(--text); } .sidebar-nav li a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .sidebar-nav li a.active { color: var(--primary); background: var(--primary-subtle); font-weight: 600; } .sidebar-footer { padding: 8px; border-top: 1px solid var(--border); margin-top: auto; position: relative; } /* Footer trigger — opens the user menu (account, settings, sign out) */ .sidebar-user-trigger { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px; border: none; background: none; border-radius: var(--radius-md); cursor: pointer; text-align: left; color: inherit; transition: background 0.12s ease, transform 0.12s ease; } .sidebar-user-trigger:hover { background: var(--primary-hover); } .sidebar-user-trigger:active { transform: scale(0.98); } .sidebar-user-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .user-menu-caret { flex-shrink: 0; opacity: 0.4; transition: transform 0.15s ease, opacity 0.12s ease; } .sidebar-user-trigger:hover .user-menu-caret { opacity: 0.7; } .sidebar-user-trigger[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); } .user-avatar { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; flex-shrink: 0; border: none; padding: 0; } .sidebar-footer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sidebar-footer-info .user-name { font-size: var(--text-sm); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .sidebar-footer-info .sidebar-role-badge { margin-top: 2px; } .sidebar-role-badge { display: inline-block; padding: 1px 7px; border-radius: var(--radius-sm); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--primary-subtle); color: var(--primary); line-height: 1.6; } /* Sidebar live count badges */ .sidebar-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: var(--text-2xs); font-weight: 700; text-align: center; line-height: 18px; margin-left: auto; flex-shrink: 0; } .sidebar-count-warning { background: var(--warning-subtle); color: var(--on-warning-subtle); } .sidebar-count-danger { background: var(--danger-subtle); color: var(--on-danger-subtle); } .sidebar-group-label { font-size: var(--text-2xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 10px 4px; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; } .sidebar-group-label:hover { color: var(--text); } .sidebar-group-label:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius-sm); } /* Collapsible group items — hidden when group is collapsed. layout-transition accepted: max-height on individual

items. grid-template-rows requires a single wrapper; here each

collapses independently via .collapsed class toggled by JS. */ .sidebar-group-items { overflow: hidden; max-height: 200px; transition: max-height 0.15s ease, opacity 0.15s ease; opacity: 1; } .sidebar-group-items.collapsed { max-height: 0; opacity: 0; pointer-events: none; } /* Collapsible group chevron — rotates when collapsed */ .sidebar-group-chevron { flex-shrink: 0; opacity: 0.4; transition: transform 0.15s ease, opacity 0.12s ease; } .sidebar-group-label:hover .sidebar-group-chevron { opacity: 0.7; } .sidebar-group-label[aria-expanded="false"] .sidebar-group-chevron { transform: rotate(-90deg); } /* Right-side cluster of a group label: rollup indicator + chevron */ .sidebar-group-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Rollup dot — surfaces a hidden item badge while its group is collapsed, so a collapsed group never swallows a signal (e.g. failed events). When the group is open, the real per-item badge shows instead. */ .sidebar-group-rollup { width: 6px; height: 6px; border-radius: var(--radius-full); flex-shrink: 0; } .sidebar-group-rollup-danger { background: var(--danger); } .sidebar-group-rollup-warning { background: var(--warning); } .sidebar-group-label[aria-expanded="true"] .sidebar-group-rollup { display: none; } /* User menu — fixed-positioned popover so it escapes the sidebar's overflow:hidden */ .sidebar-user-menu { position: fixed; z-index: 1200; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 1px; transform-origin: bottom left; } /* Open/close motion — subtle fade + lift, anchored to the trigger. */ .user-menu-enter { transition: opacity 0.13s ease-out, transform 0.13s ease-out; } .user-menu-enter-start { opacity: 0; transform: translateY(4px) scale(0.98); } .user-menu-enter-end { opacity: 1; transform: none; } .user-menu-leave { transition: opacity 0.1s ease-out, transform 0.1s ease-out; } .user-menu-leave-start { opacity: 1; transform: none; } .user-menu-leave-end { opacity: 0; transform: translateY(4px) scale(0.98); } @media (prefers-reduced-motion: reduce) { .user-menu-enter, .user-menu-leave { transition: none; } .user-menu-enter-start, .user-menu-enter-end, .user-menu-leave-start, .user-menu-leave-end { transform: none; } } .user-menu-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--text); text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .user-menu-item svg { flex-shrink: 0; opacity: 0.5; } .user-menu-item:hover { background: var(--primary-hover); } .user-menu-item:hover svg { opacity: 0.75; } .user-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .user-menu-item.active { color: var(--primary); } .user-menu-divider { height: 1px; background: var(--border); margin: 5px 2px; } .user-menu-signout { color: var(--danger); } .user-menu-signout svg { opacity: 0.7; } .user-menu-signout:hover { background: var(--danger-subtle); color: var(--on-danger-subtle); } /* Propuesta 1: Promoted primary action — New Chat button */ /* Topbar — New Chat (promoted primary action, always visible) */ .topbar-left { display: flex; align-items: center; gap: 6px; } .topbar-new-chat { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border: none; border-radius: var(--radius-md); background: var(--primary); color: var(--text-on-primary); font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease; white-space: nowrap; } .topbar-new-chat:hover { background: var(--primary-dark); box-shadow: var(--shadow-sm); } .topbar-new-chat:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .topbar-new-chat:active { transform: scale(0.98); } /* Topbar search/command palette hint */ .topbar-search-hint { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-alt); color: var(--text-muted); cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease; margin-left: var(--space-3); flex-shrink: 0; } .topbar-search-hint:hover { border-color: var(--text-muted); color: var(--text); } .topbar-search-hint:active { transform: scale(0.95); } .topbar-search-hint:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .topbar-search-hint kbd { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); } .topbar-search-hint svg { flex-shrink: 0; width: 12px; height: 12px; opacity: 0.5; } /* Topbar actions container — groups page-specific buttons + New Chat */ .topbar-actions { display: flex; align-items: center; gap: var(--space-2); } /* Topbar action button — used by Chat page for traces + context */ .topbar-action-btn { display: flex; align-items: center; justify-content: center; position: relative; width: 28px; height: 28px; border-radius: var(--radius-full); background: none; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; cursor: pointer; padding: 0; transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .topbar-action-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-subtle); } .topbar-action-btn:active { transform: scale(0.92); } .topbar-action-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .topbar-action-btn svg { width: 14px; height: 14px; } .topbar-action-badge { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--primary); color: var(--text-on-primary); font-size: var(--text-2xs); font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .topbar-new-chat svg { flex-shrink: 0; opacity: 0.85; } /* User avatar — always clickable (links to /portal/me) */ .user-avatar { cursor: pointer; text-decoration: none; } .user-avatar:hover { background: color-mix(in srgb, var(--primary) 15%, transparent); } /* ─── My Account page (/portal/me) ─── */ .me-page { max-width: 620px; margin: 0 auto; } .me-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; } .me-section h2 { font-size: var(--text-base); font-weight: 700; color: var(--text-dark); margin-bottom: 16px; } .me-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .me-section-header h2 { margin-bottom: 0; } .me-link { font-size: var(--text-sm); color: var(--primary); text-decoration: none; font-weight: 500; } .me-link:hover { text-decoration: underline; } .me-profile { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .me-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); font-weight: 700; flex-shrink: 0; } .me-profile-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .me-name { font-size: var(--text-lg); font-weight: 600; color: var(--text); } .me-email { font-size: var(--text-sm); color: var(--text-muted); } .me-stats { display: flex; gap: 24px; padding-top: 12px; border-top: 1px solid var(--border); } .me-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .me-stat-value { font-size: var(--text-xl); font-weight: 700; color: var(--primary); } .me-stat-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } /* Preference rows */ .me-pref-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } .me-pref-row + .me-pref-row { border-top: 1px solid var(--border); } .me-pref-label { font-size: var(--text-sm); font-weight: 500; color: var(--text); } .me-pref-options { display: flex; gap: 4px; } .me-pref-btn { padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: none; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; font-family: var(--font-primary); cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .me-pref-btn:hover { border-color: var(--primary); color: var(--primary); } .me-pref-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .me-pref-btn.active { background: var(--primary-subtle); border-color: var(--primary); color: var(--primary); font-weight: 600; } /* Knowledge status grid */ .me-knowledge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .me-kb-card { text-align: center; padding: 14px 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); } .me-kb-value { display: block; font-size: var(--text-xl); font-weight: 700; color: var(--text); } .me-kb-label { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; } .me-kb-success .me-kb-value { color: var(--success); } .me-kb-warning { border-color: var(--warning); } .me-kb-warning .me-kb-value { color: var(--warning-dark); } .me-kb-danger { border-color: var(--danger); } .me-kb-danger .me-kb-value { color: var(--danger); } /* Sign out link */ .me-signout { display: flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: color 0.12s ease; } .me-signout:hover { color: var(--danger); } /* Memory list rows */ .me-memory-list { display: flex; flex-direction: column; gap: 0; } .me-memory-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); } .me-memory-row:last-child { border-bottom: none; } .me-memory-icon { flex-shrink: 0; color: var(--text-muted); opacity: 0.6; } .me-memory-label { font-size: var(--text-sm); font-weight: 500; color: var(--text); min-width: 110px; } .me-memory-count { font-size: var(--text-sm); font-weight: 700; color: var(--primary); min-width: 40px; text-align: right; } .me-memory-range { font-size: var(--text-xs); color: var(--text-muted); margin-left: auto; white-space: nowrap; } .me-section-count { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; } .me-empty-hint { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; } /* Scan status */ .me-scan-time { font-size: var(--text-sm); color: var(--text-muted); margin-left: auto; white-space: nowrap; } .me-scan-badge { font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap; } .me-scan-complete { color: var(--success); background: var(--success-subtle); } .me-scan-progress { color: var(--warning-dark); background: var(--warning-subtle); } /* Sidebar collapse toggle — inside .sidebar-brand, pushed to the right */ .sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; flex-shrink: 0; border: none; border-radius: var(--radius-sm); background: none; color: var(--text-muted); cursor: pointer; transition: color 0.12s ease, background 0.12s ease; } .sidebar-collapse-btn:hover { color: var(--text); background: var(--surface-raised, var(--surface)); } .sidebar-collapse-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .sidebar-collapse-btn .collapse-icon-collapsed { display: none; } /* Sidebar — collapsed state (icons only) */ .sidebar { /* layout-transition accepted: sidebar width pushes content via flex layout. transform: translateX would leave a gap. Standard pattern for collapsible sidebars. */ transition: width 0.2s ease; } .sidebar-collapsed { width: var(--sidebar-width-collapsed); min-width: var(--sidebar-width-collapsed); max-width: var(--sidebar-width-collapsed); } .sidebar-collapsed .brand-subtitle, .sidebar-collapsed .sidebar-group-label, .sidebar-collapsed .sidebar-footer-info, .sidebar-collapsed .sidebar-count, .sidebar-collapsed .sidebar-nav li a span { display: none; } .sidebar-collapsed .sidebar-nav { padding: 8px 0; overflow: hidden; } .sidebar-collapsed .sidebar-nav li a { justify-content: center; padding: 9px 0; overflow: hidden; } .sidebar-collapsed .sidebar-nav li a svg { opacity: 0.6; } .sidebar-collapsed .sidebar-brand { justify-content: center; padding: 12px 0 10px; gap: 4px; } .sidebar-collapsed .brand-logo { display: none; } .sidebar-collapsed .sidebar-collapse-btn { margin: 0 auto; } .sidebar-collapsed .sidebar-footer { justify-content: center; padding: 10px 0; gap: 0; overflow: hidden; } .sidebar-collapsed .user-avatar { margin: 0 auto; } /* Icon-only mode: hide the caret and center the trigger to the avatar */ .sidebar-collapsed .user-menu-caret { display: none; } .sidebar-collapsed .sidebar-user-trigger { justify-content: center; padding: 6px 0; } /* Icon-only mode shows every item as an icon, so group-collapse state must not hide item icons here — always reveal them regardless of the collapsed class. */ .sidebar-collapsed .sidebar-group-items.collapsed { max-height: 200px; opacity: 1; pointer-events: auto; } .sidebar-collapsed .sidebar-collapse-btn .collapse-icon-expanded { display: none; } .sidebar-collapsed .sidebar-collapse-btn .collapse-icon-collapsed { display: block; } /* Tooltip on hover for collapsed nav items */ .sidebar-collapsed .sidebar-nav li a { position: relative; } .sidebar-collapsed .sidebar-nav li a::after { content: attr(data-tooltip); position: absolute; left: calc(var(--sidebar-width-collapsed) - 8px); top: 50%; transform: translateY(-50%); padding: 4px 10px; background: var(--text-dark); color: var(--bg); font-size: var(--text-xs); font-weight: 500; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 200; } .sidebar-collapsed .sidebar-nav li a:hover::after { opacity: 1; } /* Main */ .main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-alt); } .topbar { position: relative; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .topbar h1 { font-size: var(--text-base); font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .page-content { flex: 1; padding: var(--space-7); overflow-y: auto; } /* Boosted list region: dim subtly while a filter/page swap is in flight (list-filter.js) */ [data-list-region].list-loading { opacity: 0.55; transition: opacity 0.12s ease; pointer-events: none; } @media (prefers-reduced-motion: reduce) { [data-list-region].list-loading { transition: none; } } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; } .card h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: 16px; color: var(--text-dark); } .card-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .card-header-row h3 { margin-bottom: 0; } /* Tables */ table { width: 100%; border-collapse: collapse; font-size: var(--text-base); background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); } th { color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-alt); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--surface-alt); } tr.clickable-row { cursor: pointer; } tr.clickable-row:active td { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); } /* Keyboard-promoted rows (role="link", tabindex) need a visible focus ring. */ tr.clickable-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } tr.clickable-row[role="link"]:focus-visible td { background: var(--primary-subtle); } td a { color: var(--primary); text-decoration: none; font-weight: 600; } td a:hover { text-decoration: underline; } /* Badges */ .badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .badge-active { background: var(--success-subtle); color: var(--on-success-subtle); } .badge-draft { background: var(--warning-subtle); color: var(--on-warning-subtle); } .badge-archived { background: var(--neutral-subtle); color: var(--text-muted); } .badge-pending { background: var(--primary-subtle); color: var(--on-primary-subtle); } .badge-approved { background: var(--success-subtle); color: var(--on-success-subtle); } .badge-rejected { background: var(--danger-subtle); color: var(--on-danger-subtle); } .badge-enabled { background: var(--success-subtle); color: var(--on-success-subtle); } .badge-disabled { background: var(--neutral-subtle); color: var(--text-muted); } .badge-stream { background: var(--primary-subtle); color: var(--on-primary-subtle); } .badge-muted { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); } /* Interactive status badge (clickable toggle). Visually identical to the read-only badges; the 44px tap target (WCAG 2.5.5) is an invisible overlay so the badge itself stays compact. Used by Teams/Users status + scan toggles. */ .badge-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; transition: filter 0.12s ease, transform 0.12s ease; } .badge-toggle:hover { filter: brightness(0.96); } .badge-toggle:active { transform: scale(0.97); } .badge-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .badge-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%); } /* Decision resolution celebration */ .decision-resolved { animation: resolve-flash 0.6s ease; } @keyframes resolve-flash { 0% { background: var(--success-subtle); } 100% { background: transparent; } } .badge-resolve-in { animation: badge-pop 0.25s ease; } @keyframes badge-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Freshness indicator — recent items (< 1h) */ .freshness-dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-right: 6px; vertical-align: middle; } /* Buttons */ .btn { padding: 10px 18px; border: none; border-radius: var(--radius-md); font-size: var(--text-lg); font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease; text-decoration: none; display: inline-block; font-family: var(--font-primary); } .btn-primary { background: var(--primary); color: var(--text-on-primary); } .btn-primary:hover { background: var(--primary-dark); } .btn-danger { background: var(--danger); color: var(--text-on-primary); } .btn-danger:hover { opacity: 0.9; } .btn-outline { background: none; border: 1px solid var(--border); color: var(--text-muted); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-outline-danger { background: none; border: 1px solid var(--danger); color: var(--danger); } .btn-outline-danger:hover { background: var(--danger-subtle); } .btn:active { transform: scale(0.97); } .btn-sm { padding: 6px 14px; font-size: var(--text-base); } /* Stats grid */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } a.stat-card { text-decoration: none; display: block; cursor: pointer; } @media (hover: hover) and (pointer: fine) { a.stat-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-hover); } } .stat-card .stat-label { font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; font-weight: 600; } .stat-card .stat-value { font-size: var(--text-2xl); font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; } .stat-delta { display: inline-block; font-size: var(--text-xs); font-weight: 600; margin-top: 4px; padding: 1px 6px; border-radius: var(--radius-sm); } .stat-delta-up { color: var(--on-success-subtle); background: var(--success-subtle); } .stat-delta-neutral { color: var(--text-muted); background: var(--neutral-subtle); } /* Sparklines */ .stat-sparkline { display: block; margin-top: 8px; width: 100%; height: 20px; } .stat-sparkline-line { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .stat-sparkline-area { fill: var(--primary-subtle); } .stat-trend { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; } .stat-trend-up { color: var(--success); } .stat-trend-down { color: var(--danger); } /* Empty state */ .empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); max-width: 420px; margin-left: auto; margin-right: auto; } .empty-state h3 { font-size: var(--text-lg); margin-bottom: 8px; color: var(--text-dark); font-weight: 700; } .empty-state p { line-height: 1.6; margin-bottom: 4px; } .empty-state-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: var(--radius-xl); background: var(--primary-subtle); color: var(--primary); } .empty-state-hint { font-size: var(--text-sm); color: var(--text-muted); margin-top: 8px; font-style: italic; } .empty-state-actions { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } /* Detail panels */ .detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .detail-grid { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; font-size: var(--text-sm); } .detail-grid dt { color: var(--text-muted); font-weight: 700; } .detail-grid dd { color: var(--text); } /* Actions bar */ .actions-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } /* Search input with icon */ .search-wrap { position: relative; display: flex; align-items: center; flex: 1; max-width: 360px; } .search-wrap input[type="search"] { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: var(--text-base); font-family: var(--font-primary); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .search-wrap input[type="search"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); } .search-wrap input[type="search"]::placeholder { color: var(--text-muted); } .search-icon { position: absolute; left: 11px; color: var(--text-muted); pointer-events: none; transition: color 0.15s ease; } .search-wrap input[type="search"]:focus ~ .search-icon, .search-wrap:focus-within .search-icon { color: var(--primary); } /* User search autocomplete dropdown (Teams, Streams, Users member add) */ .user-search-wrap { position: relative; flex: 1; } .user-search-wrap input[type="search"] { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-family: var(--font-primary); outline: none; transition: border-color 0.15s ease; } .user-search-wrap input[type="search"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); } .user-search-wrap input[type="search"]::placeholder { color: var(--text-muted); } .user-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 280px; overflow-y: auto; margin-top: 4px; } .user-search-item { display: block; width: 100%; padding: 8px 12px; border: none; background: none; text-align: left; cursor: pointer; } .user-search-item:hover { background: var(--hover); } .user-search-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .user-search-item-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-dark); } .user-search-item-email { font-size: var(--text-xs); color: var(--text-muted); } .user-search-empty { color: var(--text-muted); font-size: var(--text-sm); cursor: default; } .user-search-empty:hover { background: none; } .user-search-selected { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--primary-subtle); color: var(--on-primary-subtle); font-size: var(--text-sm); font-weight: 500; } .user-search-selected-clear { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; opacity: 0.7; transition: opacity 0.15s ease; } .user-search-selected-clear:hover { opacity: 1; } /* Discrete icon button (close, delete) */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .btn-icon:hover { color: var(--text); background: var(--surface-alt); } .btn-icon:active { transform: scale(0.92); } .btn-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .btn-icon-danger:hover { color: var(--danger); background: var(--danger-subtle); } /* Code elements */ code { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--primary-subtle); color: var(--primary); padding: 1px 6px; border-radius: var(--radius-sm); } /* Pre blocks (prompt display) */ pre { font-family: var(--font-mono); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; } /* Form elements */ input[type="checkbox"] { accent-color: var(--primary); } /* Forms */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text); margin-bottom: 6px; } .form-control { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--text); font-size: var(--text-lg); font-family: var(--font-primary); outline: none; transition: border-color 0.15s ease; } .form-control:focus { border-color: var(--primary); } textarea.form-control { min-height: 120px; resize: vertical; line-height: 1.5; font-family: var(--font-mono); } select.form-control { appearance: auto; cursor: pointer; } .form-control-sm { padding: 6px 10px; font-size: var(--text-sm); border-radius: var(--radius-sm); } td .form-control-sm { width: auto; } .form-hint { font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; } /* Warning variant — surfaces a risky setting combination (e.g. enforced empty allowlist). */ .form-hint-warn { color: var(--warning-dark); font-weight: 500; } /* Contextual help tooltip — ? icon next to labels */ .help-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--bg-alt); color: var(--text-muted); font-size: var(--text-2xs); font-weight: 700; cursor: help; position: relative; vertical-align: middle; margin-left: var(--space-1); border: 1px solid var(--border); transition: color 0.12s ease, border-color 0.12s ease; } .help-tip:hover { color: var(--primary); border-color: var(--primary); } .help-tip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Tooltip popup */ .help-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--text-dark, #1a1a1a); color: var(--bg, #fff); font-size: var(--text-xs); font-weight: 400; line-height: 1.4; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); white-space: normal; width: max-content; max-width: 260px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 100; text-transform: none; letter-spacing: normal; } .help-tip:hover::after, .help-tip:focus::after { opacity: 1; } /* Form validation — semantic feedback */ .form-control.is-invalid, .form-control:user-invalid, .is-invalid { border-color: var(--danger); } .form-control.is-invalid:focus, .form-control:user-invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-subtle); } .form-control.is-valid { border-color: var(--success); } .form-control.is-valid:focus { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-subtle); } .form-error { font-size: var(--text-sm); color: var(--danger); margin-top: 4px; display: flex; align-items: center; gap: 4px; } .form-error::before { content: ''; display: inline-block; width: 14px; height: 14px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat; } .form-check-label { display: flex; align-items: center; gap: 8px; font-size: var(--text-lg); font-weight: 400; color: var(--text); text-transform: none; letter-spacing: normal; cursor: pointer; } .form-actions { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .form-inline { display: inline; } .filter-toggle { font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 6px; } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; font-size: var(--text-sm); color: var(--text-muted); } .pagination-info { font-size: var(--text-sm); } .pagination-controls { display: flex; gap: 4px; } .pagination-controls a, .pagination-controls span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .pagination-controls a:hover { border-color: var(--primary); color: var(--primary); } .pagination-controls a:active { transform: scale(0.95); } .pagination-controls a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .pagination-controls .active { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); } .pagination-controls .disabled { opacity: 0.4; pointer-events: none; } /* Toast — stacking container */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 1000; display: flex; flex-direction: column-reverse; gap: 8px; max-width: 420px; pointer-events: none; } .toast { padding: 12px 24px; background: var(--primary); color: var(--text-on-primary); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(10px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; pointer-events: auto; display: flex; align-items: center; gap: 10px; } .toast-visible { opacity: 1; transform: translateY(0); animation: toast-enter 0.25s ease-out; } @keyframes toast-enter { 0% { transform: translateY(10px); opacity: 0; } 70% { transform: translateY(-2px); opacity: 1; } 100% { transform: translateY(0); } } /* Toast variants */ .toast-success { background: var(--success); } .toast-warning { background: var(--warning); color: var(--warning-dark); } .toast-error { background: var(--danger); } .toast-info { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .toast-dismiss { background: none; border: none; color: inherit; cursor: pointer; padding: 4px; min-width: 28px; min-height: 28px; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.15s ease; margin-left: auto; flex-shrink: 0; } .toast-dismiss:hover { opacity: 1; } /* Breadcrumbs */ .breadcrumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--text-muted); font-size: var(--text-base); } .breadcrumbs a { color: var(--text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--primary); } .breadcrumbs .separator { opacity: 0.4; } /* Typing indicator — bouncing dots inside assistant bubble */ .typing-indicator { display: flex; align-items: center; gap: 5px; padding: 2px 0; transition: opacity 0.15s ease; } .typing-indicator span { display: inline-block; width: 7px; height: 7px; background: var(--primary); border-radius: var(--radius-full); animation: typing-pulse 1.4s ease-in-out infinite; } .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing-pulse { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } } /* Truncated ID with tooltip */ .id-truncated { cursor: help; border-bottom: 1px dotted var(--text-muted); } /* Shared toggle switch */ .toggle { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; cursor: pointer; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle i { position: absolute; inset: 0; background: var(--border); border-radius: var(--radius-lg); transition: background 0.2s ease; } .toggle i::after { content: ''; position: absolute; width: 14px; height: 14px; background: var(--text-on-primary); border-radius: var(--radius-full); top: 2px; left: 2px; transition: transform 0.2s ease; box-shadow: var(--shadow-sm); } .toggle input:checked + i { background: var(--primary); } .toggle input:checked + i::after { transform: translateX(14px); } .toggle--success input:checked + i { background: var(--success); } .toggle input:focus-visible + i { outline: 2px solid var(--primary); outline-offset: 2px; } /* Segment control — tab-like toggle (e.g. User / Agent switch) */ .segment-control { display: inline-flex; gap: 2px; padding: 2px; background: var(--neutral-subtle); border-radius: var(--radius-md); } .segment-control-btn { padding: 5px 14px; border: none; border-radius: calc(var(--radius-md) - 2px); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); background: transparent; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .segment-control-btn:hover { color: var(--text-primary); } .segment-control-btn.active { color: var(--on-primary-subtle); background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.06); } .segment-control-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Assist conversation timeline — lightweight message history */ .assist-timeline { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-height: 200px; overflow-y: auto; padding: 8px 0; } .assist-msg { display: flex; gap: 8px; font-size: var(--text-sm); line-height: 1.4; padding: 6px 10px; border-radius: var(--radius-md); } .assist-msg-user { background: var(--surface-raised, var(--surface)); color: var(--text); } .assist-msg-assistant { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--text-muted); } .assist-msg-role { font-weight: 600; flex-shrink: 0; min-width: 24px; } .assist-msg-text { word-break: break-word; } /* Feedback on an assistant turn — pushed to the row's trailing edge, reasons wrap beneath. */ .assist-feedback { margin-left: auto; align-self: flex-start; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .assist-feedback-btns { display: flex; gap: 2px; } .assist-feedback-btn { display: inline-flex; padding: 3px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--text-muted); cursor: pointer; transition: color 0.12s, border-color 0.12s; } .assist-feedback-btn:hover { color: var(--text); border-color: var(--border); } .assist-feedback-btn.active { color: var(--primary); border-color: var(--primary); } .assist-feedback-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .assist-feedback-reasons { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .assist-feedback-reason { font-size: 0.7rem; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: none; cursor: pointer; transition: color 0.12s, border-color 0.12s; } .assist-feedback-reason:hover { color: var(--text); border-color: var(--text-secondary); } .assist-feedback-reason:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Assist input — shared component used by _AssistChat.cshtml across all pages */ /* Composer card: the border lives on the container; the send button sits inside at the bottom-right (claude.ai-style), so the input stays symmetric. */ .create-assist { position: relative; margin-bottom: 6px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .create-assist:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-subtle); } .create-assist textarea { display: block; width: 100%; padding: 12px 14px; padding-right: 56px; /* clearance for the inset send button */ border: none; border-radius: var(--radius-lg); background: transparent; color: var(--text); font-size: var(--text-base); font-family: var(--font-primary); resize: none; outline: none; min-height: 72px; max-height: 200px; line-height: 1.5; } .create-assist textarea::placeholder { color: var(--text-muted); } .create-assist-btn { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: var(--radius-full); border: none; background: var(--primary); color: var(--text-on-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, opacity 0.15s ease; } .create-assist-btn:hover { transform: scale(1.05); } .create-assist-btn:active { transform: scale(0.95); } .create-assist-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .create-assist-btn:disabled { opacity: 0.4; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .create-assist-btn { transition: opacity 0.15s ease; } .create-assist-btn:hover, .create-assist-btn:active { transform: none; } } .create-assist-status { font-size: var(--text-sm); color: var(--text-muted); min-height: 18px; margin-bottom: 16px; } .create-assist-error { color: var(--danger); } /* ── Shared assist primitives (canonical) ──────────────────────────────── One vocabulary for every "agent proposes, you confirm" surface (create flows + Proactive). See docs/specs/proposed/ASSIST_CONVERGENCE.md. */ /* Manual escape hatch: skip the agent, configure by hand. Quiet, subordinate to the primary "Suggest" action. Replaces .pa-textlink + .create-manual-toggle. */ .assist-skip { display: inline-block; border: none; background: none; padding: 0; color: var(--text-muted); font-family: var(--font-primary); font-size: var(--text-sm); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--text-muted) 35%, transparent); transition: color .15s ease, text-decoration-color .15s ease; } .assist-skip:hover { color: var(--primary); text-decoration-color: var(--primary); } .assist-skip:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Proposed-draft banner: when the agent fills a create form, frame it as a reviewable proposal (echoes Proactive's "Proposed for …" header) rather than a form the AI silently typed into. Shown only on the AI path, not manual. */ .assist-proposed { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); background: var(--primary-subtle); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text); } .assist-proposed strong { font-weight: 600; } /* Starter chip: prefills the composer with a concrete example. An action chip (one click → fills the textarea), distinct from selection chips (.create-chip, checkbox) and removable tags (.role-chip). Replaces .pa-chip. */ .assist-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-pill); padding: 4px 12px; font-size: var(--text-xs); font-weight: 500; font-family: var(--font-primary); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s var(--ease-out, ease); } .assist-chip:hover { border-color: var(--primary); color: var(--primary); } .assist-chip:active { transform: scale(0.96); } .assist-chip:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .assist-chip { transition: border-color .15s ease, color .15s ease; } .assist-chip:active { transform: none; } } /* Full-width button variant */ .btn-block { width: 100%; margin-top: 8px; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* List page headers */ .list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); } .flow-text { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; } .page-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; margin: 0 0 var(--space-7); } /* Utility classes for common inline patterns */ .pre-display { white-space: pre-wrap; font-size: var(--text-sm); color: var(--text-muted); max-height: 400px; overflow-y: auto; } /* Rendered prompt (markdown) — for agent detail */ .prompt-rendered { font-size: var(--text-sm); line-height: 1.7; max-height: 500px; overflow-y: auto; color: var(--text); } .prompt-rendered h1, .prompt-rendered h2, .prompt-rendered h3 { font-size: var(--text-base); font-weight: 700; margin: 14px 0 6px; color: var(--text-dark); } .prompt-rendered h1 { font-size: var(--text-lg); } .prompt-rendered h2 { font-size: var(--text-lg); } .prompt-rendered ul, .prompt-rendered ol { padding-left: 20px; margin: 6px 0; } .prompt-rendered li { margin-bottom: 2px; } .prompt-rendered code { background: var(--bg-alt); padding: 1px 5px; border-radius: var(--radius-sm); font-size: var(--text-sm); } .prompt-rendered pre { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin: 8px 0; font-size: var(--text-sm); overflow-x: auto; } .prompt-rendered pre code { background: none; padding: 0; } .prompt-rendered p { margin: 4px 0; } .prompt-rendered strong { font-weight: 600; } /* side-tab detector: false positive — markdown blockquote styling, not UI chrome */ .prompt-rendered blockquote { border-left: 3px solid var(--primary-light); padding-left: 12px; margin: 8px 0; color: var(--text-muted); } .pre-payload { white-space: pre-wrap; font-size: var(--text-sm); max-height: 400px; overflow-y: auto; } .text-danger { color: var(--danger); } .border-danger { border-color: var(--danger); } .bg-alt { background: var(--bg-alt); } .mt-1 { margin-top: 4px; } .mt-3 { margin-top: 12px; } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .w-auto { width: auto; } .flex-1 { flex: 1; } .inline-row { display: flex; gap: var(--space-2); align-items: flex-end; } .text-sm { font-size: var(--text-sm); } .text-mono { font-family: var(--font-mono); font-size: var(--text-sm); } .max-w-md { max-width: 700px; margin: 0 auto; } .text-truncate { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* max-width is ignored on inline elements, so a .text-truncate inside a table cell never truncates and widens the table. Promote it to inline-block to activate the cap. */ .responsive-cards td .text-truncate { display: inline-block; vertical-align: bottom; } .hidden { display: none; } /* Focus ring — WCAG 2.4.7 */ *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* View Transitions — contextual cross-fade between pages */ @view-transition { navigation: auto; } /* Persistent elements — no animation, stay put */ .sidebar { view-transition-name: sidebar; } .topbar { view-transition-name: topbar; } ::view-transition-old(sidebar), ::view-transition-new(sidebar), ::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; } /* Page content — fade + subtle slide */ .page-content { view-transition-name: page-content; } ::view-transition-old(page-content) { animation: 120ms ease-out both vt-fade-out; } ::view-transition-new(page-content) { animation: 120ms ease-out 30ms both vt-content-in; } ::view-transition-old(root) { animation: 150ms ease-out both vt-fade-out; } ::view-transition-new(root) { animation: 150ms ease-out both vt-fade-in; } @keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vt-content-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Command Palette styles moved to pages/command-palette.css */ /* ─── Reduced Motion — WCAG 2.3.3 ────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ─── Print ───────────────────────────────────────────────────────── */ @media print { .sidebar, .topbar, .sidebar-backdrop, .toast-container, .cmd-backdrop, .skip-link, .chat-input-area, .chat-artifacts, .form-actions, .pagination { display: none !important; } body, .portal-shell { height: auto; } .main-content { margin-left: 0; } .page-content { padding: 0; overflow: visible; } .chat-container { height: auto; max-width: 100%; } .chat-messages { overflow: visible; } .chat-bubble { max-width: 100%; break-inside: avoid; } table { break-inside: auto; } tr { break-inside: avoid; } a[href]::after { content: " (" attr(href) ")"; font-size: var(--text-xs); color: var(--text-muted); } .btn { border: 1px solid var(--border); } } /* ─── Forced Colors (Windows High Contrast) ──────────────────────── */ @media (forced-colors: active) { .badge { border: 1px solid; } .toggle i { border: 1px solid; } .btn { border: 1px solid; } .flow-remove { border: 1px solid; } .card { border: 1px solid; } .stat-card { border: 1px solid; } .chat-bubble { border: 1px solid; } .artifact-chip { border: 1px solid; } .toast { border: 1px solid; } .form-control { border: 1px solid; } .sidebar-nav li a.active { border: 1px solid; } .pagination-controls .active { border: 1px solid; } } /* ─── Responsive ──────────────────────────────────────────────────── */ .topbar-menu { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 8px; margin-right: 4px; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 90; } @media (max-width: 768px) { .topbar-menu { display: flex; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: none; } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } .sidebar-collapse-btn { display: none; } /* Reset ALL collapsed overrides on mobile — sidebar always shows full content */ .sidebar-collapsed { width: var(--sidebar-width); overflow: visible; } .sidebar-collapsed .brand-subtitle, .sidebar-collapsed .sidebar-group-label, .sidebar-collapsed .sidebar-footer-info, .sidebar-collapsed .user-menu-caret, .sidebar-collapsed .sidebar-count, .sidebar-collapsed .sidebar-nav li a span { display: revert; } /* On mobile the sidebar is a full-width drawer, so group-collapse should work normally rather than being force-revealed like in icon-only mode. */ .sidebar-collapsed .sidebar-group-items.collapsed { max-height: 0; opacity: 0; pointer-events: none; } .sidebar-collapsed .sidebar-nav li a { justify-content: revert; padding: 9px 14px; } .sidebar-collapsed .sidebar-nav li a svg { opacity: 1; } .sidebar-collapsed .sidebar-brand { justify-content: revert; padding: 16px 16px 14px; gap: 10px; } .sidebar-collapsed .sidebar-footer { justify-content: revert; padding: 14px; gap: 10px; } .sidebar-collapsed .user-avatar { margin: 0; } .sidebar-backdrop.open { display: block; } .main-content { margin-left: 0; } .topbar { padding: 12px 16px; } .page-content { padding: 16px; } /* Responsive tables — card layout on mobile */ table.responsive-cards { display: block; overflow-x: visible; border: none; background: none; } table.responsive-cards thead { display: none; } table.responsive-cards tbody { display: flex; flex-direction: column; gap: 8px; } table.responsive-cards tr { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; } table.responsive-cards tr:hover td { background: transparent; } table.responsive-cards td { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: none; font-size: var(--text-sm); } table.responsive-cards td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; margin-right: 8px; } table.responsive-cards td:last-child { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--border); justify-content: flex-end; } table.responsive-cards td:last-child::before { display: none; } /* Fallback for tables without responsive-cards class */ table:not(.responsive-cards) { display: block; overflow-x: auto; } /* Stats grid single column */ .stats-grid { grid-template-columns: 1fr; } /* Me page responsive */ .me-knowledge-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .topbar h1 { font-size: var(--text-sm); } .topbar-new-chat span { display: none; } .topbar-new-chat { padding: 6px; } .topbar-search-hint { display: none; } .toast-container { left: 16px; right: 16px; bottom: 16px; max-width: none; } .create-assist { flex-direction: column; } .create-assist textarea { min-height: 64px; } }