/* Canonical CSS owner: mentor. Historical layers consolidated 2026-08-02. */ #mentorView.workspace-view { --mentor-blue: var(--action); --mentor-blue-dark: var(--action-hover); --mentor-blue-soft: var(--action-soft); --mentor-blue-line: var(--blue-line); --mentor-line: var(--border); --mentor-line-soft: var(--border-subtle); --mentor-ink: var(--text-primary); --mentor-sub: var(--text-secondary); --mentor-faint: var(--text-tertiary); height: 100%; min-height: 0; flex-direction: column; padding-bottom: 0; color: var(--mentor-ink); } #mentorView.active-view { display: flex; } #mentorView .mentor-page-header { flex: 0 0 auto; min-height: var(--topbar-height); margin: 0; } #mentorView .mentor-page-title { min-width: 0; } #mentorView .mentor-page-title h2 { letter-spacing: 0; } #mentorView #mentorNotice:not([hidden]) { flex: 0 0 auto; margin-bottom: var(--space-8); } #mentorView .mentor-layout { min-width: 0; min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: var(--mentor-directory-width) minmax(0, 1fr) var(--mentor-profile-width); overflow: hidden; border: 1px solid var(--mentor-line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); } #mentorView .mentor-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--mentor-line); background: var(--surface-muted); } #mentorView .mentor-directory-heading { height: var(--mentor-pane-header-height); flex: 0 0 var(--mentor-pane-header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: 0 var(--space-12); border-bottom: 1px solid var(--mentor-line); background: var(--surface); } #mentorView .mentor-directory-title { min-width: 0; display: flex; align-items: baseline; gap: var(--space-8); } #mentorView .mentor-directory-title strong { color: var(--mentor-ink); font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); } #mentorView .mentor-directory-title span { color: var(--mentor-faint); font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; } #mentorView .mentor-sort-toggle { height: var(--control-height); display: inline-flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-8); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mentor-sub); font-size: var(--font-size-label); cursor: pointer; transition: color var(--motion-fast), background var(--motion-fast); } #mentorView .mentor-sort-toggle:is(:hover, .active) { background: var(--action-soft); color: var(--action); } #mentorView .mentor-sort-toggle .lucide { width: var(--font-size-body); height: var(--font-size-body); } #mentorView .mentor-directory-tools { flex: 0 0 auto; display: grid; gap: var(--space-8); padding: var(--space-12); border-bottom: 1px solid var(--mentor-line-soft); } #mentorView .mentor-search-field { height: var(--control-height); display: flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-8); border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--control-surface); color: var(--mentor-faint); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } #mentorView .mentor-search-field:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px var(--focus-ring); } #mentorView .mentor-search-field .lucide { width: var(--font-size-body); height: var(--font-size-body); flex: 0 0 auto; } #mentorView .mentor-search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--mentor-ink); font-size: var(--font-size-label); } #mentorView .mentor-search-field input::placeholder { color: var(--mentor-faint); } #mentorView .mentor-evidence-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } #mentorView .mentor-evidence-filters button { height: var(--control-height); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mentor-sub); font-size: var(--font-size-label); cursor: pointer; transition: color var(--motion-fast), background var(--motion-fast); } #mentorView .mentor-evidence-filters button:is(:hover, .active) { background: var(--surface-selected); color: var(--action); font-weight: var(--font-weight-semibold); } #mentorView .mentor-sort-hint { margin: 0; color: var(--warning-color); font-size: var(--font-size-caption); line-height: 1.5; } #mentorView .mentor-list { min-height: 0; flex: 1 1 auto; overflow: hidden auto; scrollbar-gutter: stable; } #mentorView .mentor-option { position: relative; min-height: 68px; display: flex; align-items: stretch; border-bottom: 1px solid var(--mentor-line-soft); background: transparent; transition: background var(--motion-fast), box-shadow var(--motion-fast); } #mentorView .mentor-option:is(:hover, .active) { background: var(--surface-hover); } #mentorView .mentor-option.active { box-shadow: inset 3px 0 0 var(--action); } #mentorView .mentor-option.is-dragging { opacity: .48; } #mentorView .mentor-option.is-drag-over { box-shadow: inset 0 2px 0 var(--action); } #mentorView .mentor-option-main { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-4) var(--space-8) var(--space-12); border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } #mentorView .mentor-avatar { width: var(--mentor-avatar-size); height: var(--mentor-avatar-size); flex: 0 0 var(--mentor-avatar-size); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mentor-blue-line); border-radius: 50%; background: var(--mentor-blue-soft); color: var(--mentor-blue-dark); font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); } #mentorView .mentor-avatar[data-grade="a"] { border-color: var(--market-up); background: var(--market-up-soft); color: var(--market-up); } #mentorView .mentor-avatar[data-grade="c"] { border-color: var(--market-down); background: var(--market-down-soft); color: var(--market-down); } #mentorView .mentor-option-copy { min-width: 0; display: grid; flex: 1 1 auto; gap: var(--space-4); } #mentorView .mentor-option-heading { min-width: 0; display: flex; align-items: center; gap: var(--space-4); } #mentorView .mentor-option-heading > strong { min-width: 0; overflow: hidden; color: var(--mentor-ink); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; } #mentorView .mentor-option-badges { flex: 0 0 auto; display: inline-flex; gap: var(--space-4); } #mentorView :is(.mentor-option-copy > em, .mentor-option-meta) { min-width: 0; overflow: hidden; font-size: var(--font-size-caption); font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } #mentorView .mentor-option-copy > em { color: var(--mentor-sub); } #mentorView .mentor-option-meta { color: var(--mentor-faint); } #mentorView .mentor-option-tools { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); padding-right: var(--space-8); } #mentorView :is(.mentor-pin-button, .mentor-order-button) { width: var(--control-height); height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mentor-faint); cursor: pointer; opacity: 0; transition: color var(--motion-fast), background var(--motion-fast), opacity var(--motion-fast); } #mentorView .mentor-option:is(:hover, :focus-within) :is(.mentor-pin-button, .mentor-order-button), #mentorView .mentor-pin-button.active, #mentorView .mentor-list.is-sorting .mentor-order-button { opacity: 1; } #mentorView :is(.mentor-pin-button, .mentor-order-button):is(:hover, .active) { background: var(--action-soft); color: var(--action); } #mentorView :is(.mentor-pin-button, .mentor-order-button) .lucide { width: var(--font-size-body); height: var(--font-size-body); } #mentorView :is(.mentor-list-empty, .mentor-evidence-legend) { margin: 0; color: var(--mentor-faint); font-size: var(--font-size-caption); text-align: center; } #mentorView .mentor-list-empty { padding: var(--space-24) var(--space-12); } #mentorView .mentor-evidence-legend { flex: 0 0 auto; padding: var(--space-8) var(--space-12); border-top: 1px solid var(--mentor-line-soft); background: var(--surface); } #mentorView .mentor-badge { height: 18px; display: inline-flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-4); border: 1px solid var(--mentor-line); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--mentor-sub); font-size: var(--font-size-aux); font-weight: var(--font-weight-semibold); line-height: 1; } #mentorView .mentor-badge .lucide { width: var(--font-size-aux); height: var(--font-size-aux); } #mentorView .mentor-badge.grade-a { border-color: var(--market-up); background: var(--market-up-soft); color: var(--market-up); } #mentorView .mentor-badge.grade-b { border-color: var(--mentor-blue-line); background: var(--mentor-blue-soft); color: var(--mentor-blue-dark); } #mentorView .mentor-badge.grade-c { border-color: var(--market-down); background: var(--market-down-soft); color: var(--market-down); } #mentorView .mentor-badge.private { border-color: var(--warning-color); background: var(--warning-soft); color: var(--warning-color); } #mentorView .mentor-chat-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-subtle); } #mentorView .mentor-chat-header { height: var(--mentor-pane-header-height); flex: 0 0 var(--mentor-pane-header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: 0 var(--space-16); border-bottom: 1px solid var(--mentor-line); background: var(--surface); } #mentorView .mentor-chat-identity { min-width: 0; display: flex; align-items: center; gap: var(--space-8); } #mentorView .mentor-chat-identity > div { min-width: 0; } #mentorView .mentor-active-title { min-width: 0; display: flex; align-items: center; gap: var(--space-8); } #mentorView .mentor-active-title h3 { min-width: 0; margin: 0; overflow: hidden; color: var(--mentor-ink); font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; } #mentorView .mentor-active-badges { display: inline-flex; gap: var(--space-4); } #mentorView #activeMentorStatus { margin: var(--space-4) 0 0; color: var(--mentor-faint); font-size: var(--font-size-caption); } #mentorView .mentor-clear-button { flex: 0 0 auto; color: var(--mentor-sub); } #mentorView .mentor-messages { min-height: 0; flex: 1 1 auto; overflow: hidden auto; padding: var(--space-24); scrollbar-gutter: stable; scroll-behavior: smooth; } #mentorView .mentor-empty-state { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); color: var(--mentor-sub); text-align: center; } #mentorView .mentor-empty-mark { width: var(--mentor-profile-avatar-size); height: var(--mentor-profile-avatar-size); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mentor-blue-line); border-radius: 50%; background: var(--mentor-blue-soft); color: var(--mentor-blue-dark); } #mentorView .mentor-empty-mark .lucide { width: var(--font-size-metric); height: var(--font-size-metric); } #mentorView .mentor-empty-state strong { color: var(--mentor-ink); font-size: var(--font-size-card-title); } #mentorView .mentor-empty-state p { max-width: var(--table-compact); margin: 0; font-size: var(--font-size-label); line-height: 1.7; } #mentorView .mentor-message { width: 100%; display: flex; align-items: flex-start; gap: var(--space-8); margin-bottom: var(--space-16); } #mentorView .mentor-message.user { flex-direction: row-reverse; } #mentorView .mentor-message-avatar { width: var(--mentor-avatar-size); height: var(--mentor-avatar-size); flex: 0 0 var(--mentor-avatar-size); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mentor-line); border-radius: 50%; background: var(--surface); color: var(--mentor-sub); font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); } #mentorView .mentor-message.user .mentor-message-avatar { border-color: var(--mentor-blue-line); background: var(--mentor-blue-soft); color: var(--mentor-blue-dark); } #mentorView .mentor-message-body { max-width: var(--mentor-message-max-width); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } #mentorView .mentor-message.user .mentor-message-body { align-items: flex-end; } #mentorView .mentor-message-label { color: var(--mentor-faint); font-size: var(--font-size-caption); line-height: 1.4; } #mentorView .mentor-message-content { min-width: 48px; padding: var(--space-12) var(--space-16); border: 1px solid var(--mentor-line); border-radius: var(--radius-lg); background: var(--surface); color: var(--mentor-ink); font-size: var(--font-size-body); line-height: 1.75; overflow-wrap: anywhere; } #mentorView .mentor-message.assistant .mentor-message-content { border-top-left-radius: var(--radius-sm); } #mentorView .mentor-message.user .mentor-message-content { border-color: var(--mentor-blue-line); border-top-right-radius: var(--radius-sm); background: var(--mentor-blue-soft); } #mentorView .mentor-message.is-error .mentor-message-content { border-color: var(--market-up); } #mentorView .mentor-message small { color: var(--mentor-faint); font-size: var(--font-size-caption); } #mentorView .mentor-answer-paragraph { margin: 0 0 var(--space-8); } #mentorView .mentor-answer-paragraph:last-child { margin-bottom: 0; } #mentorView .mentor-answer-heading { display: block; margin: var(--space-12) 0 var(--space-4); color: var(--mentor-ink); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); } #mentorView .mentor-answer-heading:first-child { margin-top: 0; } #mentorView .mentor-answer-list { margin: var(--space-4) 0 var(--space-8); padding-left: var(--space-24); } #mentorView .mentor-answer-list li + li { margin-top: var(--space-4); } #mentorView .mentor-answer-quote { display: block; margin: var(--space-8) 0; padding-left: var(--space-12); border-left: 2px solid var(--action); color: var(--mentor-sub); } #mentorView .mentor-answer-rule { display: block; height: 1px; margin: var(--space-12) 0; background: var(--mentor-line-soft); } #mentorView .mentor-loading-copy { margin: 0; color: var(--mentor-sub); } #mentorView .assistant-stream-caret { width: 2px; height: var(--font-size-body); display: inline-block; margin-left: var(--space-4); background: var(--action); animation: mentor-caret 900ms steps(1, end) infinite; } #mentorView .mentor-follow-ups { width: 100%; display: grid; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-8); border-top: 1px solid var(--mentor-line-soft); } #mentorView .mentor-follow-ups > span { color: var(--mentor-faint); font-size: var(--font-size-caption); } #mentorView .mentor-follow-ups button { min-height: var(--control-height); display: flex; align-items: flex-start; gap: var(--space-8); padding: var(--space-4) 0; border: 0; background: transparent; color: var(--action); font-size: var(--font-size-label); line-height: 1.5; text-align: left; cursor: pointer; transition: color var(--motion-fast), transform var(--motion-fast); } #mentorView .mentor-follow-ups button:hover { color: var(--action-hover); transform: translateX(var(--space-4)); } #mentorView .mentor-follow-ups button .lucide { width: var(--font-size-body); height: var(--font-size-body); flex: 0 0 auto; margin-top: var(--space-4); } #mentorView .mentor-quick-prompts { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-16) 0; border-top: 1px solid var(--mentor-line); background: var(--surface); } #mentorView .mentor-quick-prompts[hidden] { display: none; } #mentorView .mentor-prompt-label { color: var(--mentor-faint); font-size: var(--font-size-caption); } #mentorView .mentor-quick-prompts button { height: var(--control-height); display: inline-flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-8); border: 1px solid var(--mentor-line); border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--mentor-sub); font-size: var(--font-size-label); cursor: pointer; transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast); } #mentorView .mentor-quick-prompts button:hover { border-color: var(--mentor-blue-line); background: var(--mentor-blue-soft); color: var(--action); } #mentorView .mentor-quick-prompts button .lucide { width: var(--font-size-body); height: var(--font-size-body); } #mentorView .mentor-chat-form { min-height: var(--mentor-composer-min-height); flex: 0 0 auto; display: flex; flex-direction: column; padding: var(--space-8) var(--space-16); border-top: 1px solid var(--mentor-line); background: var(--surface); } #mentorView #mentorQuestion { width: 100%; min-height: 50px; flex: 1 1 auto; resize: none; border: 0; outline: 0; background: transparent; color: var(--mentor-ink); font-family: inherit; font-size: var(--font-size-body); line-height: 1.6; } #mentorView #mentorQuestion::placeholder { color: var(--mentor-faint); } #mentorView .mentor-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); } #mentorView .mentor-composer-actions > span { margin-right: auto; color: var(--mentor-faint); font-size: var(--font-size-caption); } #mentorView :is(.mentor-send-button, .mentor-stop-button) { min-width: var(--col-action); } #mentorView .mentor-stop-button { color: var(--market-up); } #mentorView .mentor-disclaimer { flex: 0 0 auto; margin: 0; padding: var(--space-4) var(--space-16) var(--space-8); background: var(--surface); color: var(--mentor-faint); font-size: var(--font-size-aux); text-align: center; } #mentorView .mentor-profile-panel { min-width: 0; min-height: 0; overflow: hidden auto; border-left: 1px solid var(--mentor-line); background: var(--surface); } #mentorView .mentor-profile-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-24) var(--space-16); text-align: center; } #mentorView .mentor-profile-avatar { width: var(--mentor-profile-avatar-size); height: var(--mentor-profile-avatar-size); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mentor-blue-line); border-radius: 50%; background: var(--mentor-blue-soft); color: var(--mentor-blue-dark); font-size: var(--font-size-metric); font-weight: var(--font-weight-semibold); } #mentorView .mentor-profile-hero h3 { margin: 0; color: var(--mentor-ink); font-size: var(--font-size-page-title); font-weight: var(--font-weight-semibold); letter-spacing: 0; } #mentorView .mentor-profile-hero > p { margin: 0; color: var(--mentor-sub); font-size: var(--font-size-label); line-height: 1.65; } #mentorView .mentor-profile-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); } #mentorView .mentor-profile-section { display: grid; gap: var(--space-8); padding: var(--space-16); border-top: 1px solid var(--mentor-line-soft); } #mentorView .mentor-profile-section h4 { margin: 0; color: var(--mentor-faint); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); } #mentorView .mentor-profile-section > strong { color: var(--mentor-ink); font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); } #mentorView .mentor-profile-section > p { margin: 0; color: var(--mentor-sub); font-size: var(--font-size-label); line-height: 1.7; } #mentorView .mentor-active-focus { display: flex; flex-wrap: wrap; gap: var(--space-4); } #mentorView .mentor-active-focus span { padding: var(--space-4) var(--space-8); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--mentor-sub); font-size: var(--font-size-caption); } #mentorView .mentor-profile-boundary p { display: flex; align-items: flex-start; gap: var(--space-8); } #mentorView .mentor-profile-boundary .lucide { width: var(--font-size-body); height: var(--font-size-body); flex: 0 0 auto; margin-top: var(--space-4); color: var(--mentor-faint); } #mentorView :is(button, input, textarea):focus-visible { outline: 2px solid var(--action); outline-offset: 2px; } @keyframes mentor-caret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #mentorView :is(.mentor-sort-toggle, .mentor-search-field, .mentor-evidence-filters button, .mentor-option, .mentor-pin-button, .mentor-order-button, .mentor-follow-ups button, .mentor-quick-prompts button) { transition: none; } #mentorView .assistant-stream-caret { animation: none; } #mentorView .mentor-messages { scroll-behavior: auto; } } :root[data-theme="dark"] #mentorView { --mentor-blue: var(--action); --mentor-blue-dark: var(--action-hover); --mentor-blue-soft: var(--action-soft); --mentor-blue-line: var(--blue-line); --mentor-line: var(--border); --mentor-line-soft: var(--border-subtle); --mentor-ink: var(--text-primary); --mentor-sub: var(--text-secondary); --mentor-faint: var(--text-tertiary); } :root[data-theme="dark"] #mentorView .mentor-message { border-color: var(--line-soft); background: var(--surface-subtle); box-shadow: none; } :root[data-theme="dark"] #mentorView .mentor-message.user .mentor-message-content { border-color: var(--blue-line); background: var(--action-soft); color: var(--text-primary); } @media (max-width: 1279px) { #mentorView .mentor-layout { grid-template-columns: var(--mentor-directory-width) minmax(0, 1fr); } #mentorView .mentor-profile-panel { display: none; } }