Files
xiaobaifupan/app/frontend/pages/mentor/foundation.css
T

2778 lines
40 KiB
CSS

/* Canonical CSS owner: mentor. Historical layers consolidated 2026-08-02. */
.mentor-option strong {
display: block;
font-size: 15px;
}
.mentor-option span {
display: block;
margin-top: 6px;
overflow: hidden;
color: var(--text-muted);
font-size: 11px;
line-height: 1.55;
text-overflow: ellipsis;
white-space: nowrap;
}
.mentor-option small {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 8px;
}
.mentor-option i {
padding: 2px 5px;
border-radius: 3px;
background: var(--surface-muted);
color: var(--blue-dark);
font-size: 10px;
font-style: normal;
}
.mentor-chat-header h3 {
margin: 5px 0px 0px;
font-size: 18px;
}
.mentor-message p {
margin: 0px;
overflow-wrap: anywhere;
line-height: 1.75;
white-space: pre-wrap;
}
.model-config-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--line);
}
.model-role-selectors {
display: grid;
grid-template-columns: repeat(2, minmax(0px, 1fr));
gap: 12px;
margin: 4px 0px 16px;
}
.model-role-selectors select {
width: 100%;
min-height: 40px;
padding: 0px 10px;
border: 1px solid var(--line-strong);
border-radius: 5px;
background: var(--surface);
}
.model-pool-list {
display: grid;
gap: 10px;
}
.model-pool-row {
display: grid;
gap: 11px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--surface);
}
.model-pool-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.model-pool-heading strong {
color: var(--text-primary);
font-size: 14px;
}
.model-pool-heading span {
color: var(--text-muted);
font-size: 11px;
}
.model-pool-fields {
display: grid;
grid-template-columns: 0.75fr 1.35fr 1fr 1.15fr;
gap: 10px;
}
.model-delete-button {
margin-left: auto;
color: var(--coral);
}
@media (max-width: 900px) {
.model-pool-fields {
grid-template-columns: repeat(2, minmax(0px, 1fr));
}
}
@media (max-width: 600px) {
.model-pool-fields,
.model-role-selectors {
grid-template-columns: minmax(0px, 1fr);
}
}
.model-config-panel {
min-width: 0px;
display: grid;
gap: 11px;
padding: 14px;
border-right: 1px solid var(--line);
background: var(--surface);
}
.model-config-panel:last-child {
border-right: 0px;
}
.model-config-heading {
min-height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.model-config-heading h4 {
margin: 0px;
font-size: 14px;
}
.model-role {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 2px 7px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
}
.model-test-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 2px;
}
.model-test-status {
min-width: 0px;
overflow: hidden;
color: var(--text-muted);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.model-test-status.success {
color: var(--green);
}
.model-test-status.failure {
color: var(--coral);
}
@media (max-width: 860px) {
.mentor-layout {
grid-template-columns: 1fr;
}
.mentor-sidebar {
max-height: 260px;
overflow-y: auto;
border-right: 0px;
border-bottom: 1px solid var(--line);
}
.mentor-list {
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
}
@media (max-width: 520px) {
.settings-dialog .model-config-grid {
width: 100%;
max-width: 100%;
min-width: 0px;
}
.model-test-row {
align-items: flex-start;
flex-wrap: wrap;
}
.model-test-status {
width: 100%;
white-space: normal;
}
.model-config-grid {
grid-template-columns: 1fr;
}
.mentor-chat-panel,
.mentor-layout {
min-height: 580px;
}
.mentor-list {
grid-template-columns: 1fr;
}
.mentor-chat-header {
align-items: flex-start;
flex-direction: column;
gap: 6px;
padding: 11px 12px;
}
.mentor-messages {
padding: 12px;
}
.mentor-message {
max-width: 92%;
}
.mentor-quick-prompts {
padding-right: 12px;
padding-left: 12px;
}
.mentor-chat-form {
padding-right: 12px;
padding-left: 12px;
grid-template-columns: 1fr;
}
.mentor-chat-form .button {
width: 100%;
height: 38px;
}
.mentor-disclaimer {
padding-right: 12px;
padding-left: 12px;
text-align: left;
}
.model-config-panel {
border-right: 0px;
border-bottom: 1px solid var(--line);
}
.model-config-panel:last-child {
border-bottom: 0px;
}
}
.mentor-directory-heading > div {
display: flex;
align-items: baseline;
gap: 8px;
}
.mentor-directory-heading h3 {
margin: 0px;
font-size: 14px;
}
.mentor-directory-heading span {
color: var(--text-muted);
font-size: 11px;
}
:where(#mentorView) .mentor-evidence-filters button:hover {
background: var(--action-soft);
}
:where(#mentorView) .mentor-option-main {
grid-template-columns: minmax(0px, 1fr) auto;
align-items: center;
gap: 8px;
}
.mentor-option .mentor-option-tools {
display: flex;
align-items: center;
gap: 2px;
margin: 0px;
overflow: visible;
color: inherit;
font-size: inherit;
line-height: normal;
white-space: normal;
}
:where(#mentorView) .mentor-order-button:disabled {
color: color-mix(in srgb, var(--text-muted) 35%, transparent);
}
:where(#mentorView) .mentor-option.is-drag-over {
border-color: var(--action);
}
.mentor-option:focus-visible {
outline: 2px solid var(--action);
outline-offset: -2px;
}
.mentor-option .mentor-option-copy {
display: grid;
margin: 0px;
overflow: visible;
color: inherit;
font-size: inherit;
line-height: normal;
white-space: normal;
}
.mentor-option-copy strong {
overflow: hidden;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.mentor-option-copy em {
overflow: hidden;
color: var(--text-muted);
font-size: 10px;
font-style: normal;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.mentor-option .mentor-option-badges {
display: flex;
margin: 0px;
overflow: visible;
color: inherit;
font-size: inherit;
line-height: normal;
white-space: normal;
}
:where(#mentorView) .mentor-option-badges {
max-width: 76px;
}
.mentor-option .mentor-badge {
display: inline-flex;
margin: 0px;
overflow: visible;
line-height: 1;
}
:where(#mentorView) .mentor-active-title {
flex-wrap: wrap;
}
:where(#mentorView) .mentor-active-focus {
flex-wrap: wrap;
}
:where(#mentorView) .mentor-active-focus span {
border-radius: 3px;
}
:where(#mentorView) .mentor-message {
margin-bottom: 12px;
}
@media (min-width: 721px) and (max-width: 1023px) {
.mentor-layout {
grid-template-columns: 280px minmax(0px, 1fr);
}
.mentor-sidebar {
max-height: none;
overflow: hidden;
border-right: 1px solid var(--line);
border-bottom: 0px;
}
.mentor-list {
grid-template-columns: minmax(0px, 1fr);
}
}
@media (max-width: 720px) {
:where(#mentorView) .mentor-sidebar {
max-height: none;
border-right: 0px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
:where(#mentorView) .mentor-directory-content {
padding: 14px 12px 10px;
background: var(--surface-muted);
}
:where(#mentorView) .mentor-sort-toggle {
padding: 0px 10px;
font-size: 11px;
}
:where(#mentorView) .mentor-evidence-filters button {
font-size: 11px;
}
}
:where(#mentorView) .mentor-quick-prompts {
flex-wrap: wrap;
border-color: var(--border);
}
:where(#mentorView) .mentor-option:hover {
border-color: var(--border-strong);
}
:where(#mentorView) .mentor-option.active {
border-color: color-mix(in srgb, var(--action) 42%, var(--border));
}
@media (min-width: 721px) and (max-width: 1279px) {
.mentor-layout {
grid-template-columns: 280px minmax(0px, 1fr);
}
}
@media (max-width: 720px) {
#mentorView > .section-toolbar {
min-height: 66px;
align-items: center;
flex-direction: row;
}
#mentorView > .section-toolbar .section-title-group {
flex: 1 1 0%;
}
:where(#mentorView) .mentor-empty-state {
min-height: 100%;
}
.mentor-empty-state strong {
font-size: 16px;
}
}
@media (max-width: 900px) {
body[data-active-view="mentorView"] .workspace-view {
padding: 10px 10px 84px;
}
}
body[data-active-view="mentorView"] .workspace-view {
width: auto;
max-width: none;
margin: 0px;
border: 0px;
border-radius: 0px;
background: transparent;
box-shadow: none;
padding: 14px 16px 24px;
}
.mentor-page-controls .mentor-evidence-filters {
margin: 0px;
padding: 2px;
border-radius: 7px;
background: rgb(238, 240, 243);
}
:where(#mentorView) .mentor-evidence-filters {
grid-template-columns: repeat(4, minmax(0px, 1fr));
}
:where(#mentorView) .mentor-evidence-filters button {
white-space: nowrap;
}
@media (max-width: 900px) {
.mentor-page-controls {
width: 100%;
justify-content: space-between;
}
.mentor-page-controls .mentor-evidence-filters {
overflow-x: auto;
}
}
@media (max-width: 720px) {
body[data-active-view="mentorView"] .workspace-view {
margin-top: 0px;
border-radius: 7px;
padding: 0px 0px 76px;
}
}
body[data-active-view="mentorView"] .overview-strip {
display: grid;
}
:where(#mentorView) .mentor-layout {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
:where(#mentorView) .mentor-chat-panel {
border-color: var(--border);
}
:where(#mentorView) .mentor-sidebar {
border-right-color: var(--border);
}
:where(#mentorView) .mentor-directory-heading {
border-color: var(--border);
}
:where(#mentorView) .mentor-list {
align-content: start;
grid-template-columns: minmax(0px, 1fr);
gap: 2px;
padding-right: 3px;
}
:where(#mentorView) .mentor-option {
min-width: 0px;
cursor: pointer;
text-align: left;
border-bottom-color: rgb(231, 235, 239);
}
:where(#mentorView) .mentor-chat-header {
justify-content: space-between;
border-color: var(--border);
}
:where(#mentorView) .mentor-chat-form {
border-color: var(--border);
}
#mentorView {
--mentor-blue: #2563eb;
--mentor-blue-dark: #1d4ed8;
--mentor-blue-soft: #eff4ff;
--mentor-blue-line: #c7d8fb;
--mentor-line: #e5e7eb;
--mentor-line-soft: #eef0f3;
--mentor-ink: #1f2937;
--mentor-sub: #6b7280;
--mentor-faint: #9ca3af;
color: var(--mentor-ink);
}
#mentorView .mentor-page-header {
min-height: 42px;
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 12px;
padding: 0px;
border: 0px;
background: transparent;
}
#mentorView .mentor-page-title {
min-width: 0px;
display: flex;
align-items: baseline;
gap: 10px;
}
#mentorView .mentor-page-title h2 {
margin: 0px;
color: var(--mentor-ink);
font-size: 18px;
font-weight: 760;
letter-spacing: 0px;
}
#mentorView .mentor-page-title .section-subtitle {
overflow: hidden;
color: var(--mentor-faint);
font-size: 11.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
#mentorView .mentor-page-controls {
min-width: 0px;
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
#mentorView .mentor-evidence-filters {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 0px;
border-radius: 8px;
background: rgb(238, 240, 243);
}
#mentorView .mentor-evidence-filters button {
min-width: 52px;
min-height: 28px;
padding: 0px 12px;
border: 0px;
border-radius: 6px;
background: transparent;
color: var(--mentor-sub);
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-family: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
font-size: 12px;
cursor: pointer;
transition: color 150ms, background-color 150ms, box-shadow 150ms;
}
#mentorView .mentor-evidence-filters button:hover {
color: var(--mentor-blue);
}
#mentorView .mentor-evidence-filters button.active {
background: rgb(255, 255, 255);
color: var(--mentor-ink);
font-weight: 650;
box-shadow: rgba(16, 24, 40, 0.09) 0px 1px 2px;
}
#mentorView .mentor-evidence-filters button[data-mentor-grade="A"] {
color: rgb(22, 129, 74);
}
#mentorView .mentor-evidence-filters button[data-mentor-grade="B"] {
color: rgb(46, 103, 199);
}
#mentorView .mentor-evidence-filters button[data-mentor-grade="C"] {
color: rgb(167, 102, 8);
}
#mentorView .mentor-evidence-filters button:focus-visible {
outline: rgba(37, 99, 235, 0.35) solid 2px;
outline-offset: 1px;
}
#mentorView #mentorNotice {
margin: 0px 0px 10px;
}
#mentorView .mentor-layout {
height: auto;
min-height: 0px;
display: grid;
grid-template-columns: 340px minmax(0px, 1fr);
align-items: stretch;
gap: 12px;
overflow: visible;
border: 0px;
border-radius: 0px;
background: transparent;
box-shadow: none;
}
@media (min-width: 721px) {
body[data-active-view="mentorView"] .app-main {
min-height: 0px;
display: flex;
flex-direction: column;
padding-bottom: 0px;
overflow: hidden;
}
body[data-active-view="mentorView"] .overview-strip {
flex: 0 0 auto;
}
body[data-active-view="mentorView"] #mentorView.active-view {
min-height: 0px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
padding-bottom: 6px;
}
}
#mentorView .mentor-sidebar {
min-width: 0px;
min-height: 0px;
overflow: hidden;
border: 1px solid var(--mentor-line);
border-radius: 10px;
background: rgb(255, 255, 255);
box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px;
position: relative;
padding: 0px;
}
#mentorView .mentor-directory-backdrop {
display: none;
}
#mentorView .mentor-directory-close {
display: none;
}
#mentorView .mentor-directory-toggle {
display: none;
}
#mentorView .mentor-directory-content {
height: 100%;
min-height: 0px;
display: grid;
grid-template-rows: auto auto auto minmax(0px, 1fr) auto;
gap: 0px;
padding: 0px;
background: rgb(255, 255, 255);
}
#mentorView .mentor-directory-heading {
border-bottom: 1px solid var(--mentor-line-soft);
background: rgb(255, 255, 255);
min-height: 48px;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px 9px 14px;
}
#mentorView .mentor-directory-heading > .mentor-directory-title {
min-width: 0px;
display: flex;
align-items: baseline;
gap: 8px;
}
#mentorView .mentor-directory-title h3 {
flex: 0 0 auto;
margin: 0px;
color: var(--mentor-ink);
font-size: 14px;
font-weight: 700;
}
#mentorView .mentor-directory-title > span {
overflow: hidden;
color: var(--mentor-faint);
font-size: 10.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
#mentorView .mentor-directory-actions {
display: flex;
align-items: center;
gap: 5px;
margin-left: auto;
}
#mentorView .mentor-count {
color: var(--mentor-faint);
font-size: 10.5px;
font-weight: 500;
white-space: nowrap;
}
#mentorView .mentor-sort-toggle {
min-height: 28px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0px 7px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--mentor-blue);
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-family: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
font-size: 11px;
cursor: pointer;
}
#mentorView .mentor-sort-toggle.active {
border-color: var(--mentor-blue-line);
background: var(--mentor-blue-soft);
color: var(--mentor-blue-dark);
}
#mentorView .mentor-sort-toggle:hover {
border-color: var(--mentor-blue-line);
background: var(--mentor-blue-soft);
color: var(--mentor-blue-dark);
}
#mentorView .mentor-sort-toggle .lucide {
width: 13px;
height: 13px;
}
#mentorView .mentor-search-field {
height: 34px;
display: grid;
grid-template-columns: 16px minmax(0px, 1fr);
align-items: center;
gap: 7px;
margin: 9px 12px 7px;
padding: 0px 9px;
border: 1px solid var(--mentor-line);
border-radius: 7px;
background: rgb(255, 255, 255);
color: var(--mentor-faint);
}
#mentorView .mentor-search-field:focus-within {
border-color: var(--mentor-blue-line);
box-shadow: rgba(37, 99, 235, 0.08) 0px 0px 0px 2px;
}
#mentorView .mentor-search-field .lucide {
width: 14px;
height: 14px;
}
#mentorView .mentor-search-field input {
width: 100%;
min-width: 0px;
height: 32px;
padding: 0px;
border: 0px;
outline: 0px;
background: transparent;
color: var(--mentor-ink);
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
line-height: inherit;
font-family: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
font-size: 12px;
}
#mentorView .mentor-search-field input::placeholder {
color: var(--mentor-faint);
}
#mentorView .mentor-sort-hint {
margin: 0px;
padding: 3px 14px 7px;
color: var(--mentor-faint);
font-size: 10px;
line-height: 1.4;
}
#mentorView .mentor-list {
min-height: 0px;
display: block;
padding: 0px;
overflow: hidden auto;
scrollbar-color: rgb(215, 220, 228) transparent;
scrollbar-width: thin;
}
#mentorView .mentor-option {
width: 100%;
min-height: 82px;
display: grid;
grid-template-columns: minmax(0px, 1fr) auto;
align-items: stretch;
gap: 0px;
padding: 0px 7px 0px 0px;
overflow: hidden;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-image: none;
border-bottom: 1px solid var(--mentor-line-soft);
border-radius: 0px;
background: rgb(255, 255, 255);
color: var(--mentor-ink);
box-shadow: none;
transition: background-color 150ms, box-shadow 150ms;
}
#mentorView .mentor-option:hover {
background: rgb(248, 250, 255);
}
#mentorView .mentor-option.active {
background: var(--mentor-blue-soft);
box-shadow: inset 2px 0 0 var(--mentor-blue);
}
#mentorView .mentor-option.is-dragging {
opacity: 0.45;
}
#mentorView .mentor-option.is-drag-over {
background: rgb(231, 239, 255);
box-shadow: inset 3px 0 0 var(--mentor-blue);
}
#mentorView .mentor-option-main {
min-width: 0px;
min-height: 81px;
display: block;
padding: 10px 7px 9px 14px;
border: 0px;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
text-align: left;
}
#mentorView .mentor-option-main:disabled {
cursor: default;
}
#mentorView .mentor-option-main:focus-visible {
outline: rgba(37, 99, 235, 0.42) solid 2px;
outline-offset: -3px;
}
#mentorView .mentor-option-copy {
min-width: 0px;
display: grid;
gap: 4px;
margin: 0px;
color: inherit;
line-height: normal;
}
#mentorView .mentor-option-heading {
min-width: 0px;
display: flex;
align-items: center;
gap: 7px;
}
#mentorView .mentor-option-heading > strong {
min-width: 0px;
overflow: hidden;
color: var(--mentor-ink);
font-size: 13px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
#mentorView .mentor-option-copy > em {
display: block;
overflow: hidden;
color: var(--mentor-sub);
font-size: 11.5px;
font-style: normal;
line-height: 1.55;
text-overflow: ellipsis;
white-space: nowrap;
}
#mentorView .mentor-option-meta {
min-width: 0px;
display: flex;
align-items: center;
gap: 9px;
overflow: hidden;
color: var(--mentor-faint);
font-size: 10.5px;
line-height: 1.25;
white-space: nowrap;
}
#mentorView .mentor-option-meta > span {
display: inline;
flex: 0 0 auto;
margin: 0px;
color: inherit;
font-size: inherit;
}
#mentorView .mentor-option-meta .mentor-evidence-source {
max-width: 108px;
overflow: hidden;
border-bottom: 1px dashed rgb(199, 205, 214);
text-overflow: ellipsis;
cursor: help;
}
#mentorView .mentor-active-badges {
min-width: 0px;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 4px;
margin: 0px;
}
#mentorView .mentor-option-badges {
min-width: 0px;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 4px;
margin: 0px;
}
#mentorView .mentor-option-heading .mentor-option-badges {
margin-left: auto;
}
#mentorView .mentor-badge {
min-height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
margin: 0px;
padding: 0px 6px;
border: 1px solid var(--mentor-line);
border-radius: 5px;
background: rgb(243, 244, 246);
color: var(--mentor-sub);
font-size: 9.5px;
font-style: normal;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
#mentorView .mentor-badge .lucide {
width: 10px;
height: 10px;
}
#mentorView .mentor-badge.grade-a {
border-color: rgb(184, 220, 199);
background: rgb(237, 248, 241);
color: rgb(22, 129, 74);
}
#mentorView .mentor-badge.grade-b {
border-color: rgb(189, 208, 237);
background: rgb(239, 245, 255);
color: rgb(46, 103, 199);
}
#mentorView .mentor-badge.grade-c {
border-color: rgb(234, 209, 167);
background: rgb(253, 245, 232);
color: rgb(167, 102, 8);
}
#mentorView .mentor-badge.private {
border-color: rgb(232, 208, 156);
background: rgb(255, 248, 231);
color: rgb(146, 103, 19);
}
#mentorView .mentor-badge.quality {
border-color: transparent;
background: rgb(243, 244, 246);
color: var(--mentor-faint);
}
#mentorView .mentor-option-tools {
display: flex;
align-items: center;
align-self: center;
gap: 1px;
}
#mentorView .mentor-order-button {
width: 26px;
min-width: 26px;
height: 28px;
display: grid;
place-items: center;
padding: 0px;
border: 0px;
border-radius: 6px;
background: transparent;
color: rgb(161, 168, 179);
cursor: pointer;
}
#mentorView .mentor-pin-button {
width: 26px;
min-width: 26px;
height: 28px;
display: grid;
place-items: center;
padding: 0px;
border: 0px;
border-radius: 6px;
background: transparent;
color: rgb(161, 168, 179);
cursor: pointer;
}
#mentorView .mentor-order-button:hover:not(:disabled) {
background: rgb(238, 241, 245);
color: var(--mentor-ink);
}
#mentorView .mentor-pin-button:hover {
background: rgb(238, 241, 245);
color: var(--mentor-ink);
}
#mentorView .mentor-pin-button.active {
background: rgb(255, 244, 216);
color: rgb(163, 109, 13);
}
#mentorView .mentor-pin-button.active .lucide {
fill: currentcolor;
}
#mentorView .mentor-order-button .lucide {
width: 13px;
height: 13px;
}
#mentorView .mentor-pin-button .lucide {
width: 13px;
height: 13px;
}
#mentorView .mentor-order-button:disabled {
opacity: 0.3;
cursor: default;
}
#mentorView .mentor-list.is-sorting .mentor-option {
cursor: grab;
}
#mentorView .mentor-list.is-sorting .mentor-option-badges {
display: none;
}
#mentorView .mentor-list-empty {
padding: 32px 14px;
color: var(--mentor-faint);
font-size: 12px;
text-align: center;
}
#mentorView .mentor-evidence-legend {
margin: 0px;
padding: 8px 12px 9px;
border-top: 1px solid var(--mentor-line-soft);
color: var(--mentor-faint);
font-size: 9.5px;
line-height: 1.5;
}
#mentorView .mentor-chat-panel {
min-width: 0px;
min-height: 0px;
overflow: hidden;
border: 1px solid var(--mentor-line);
border-radius: 10px;
background: rgb(255, 255, 255);
box-shadow: rgba(16, 24, 40, 0.05) 0px 1px 2px;
height: 100%;
display: grid;
grid-template-rows: auto minmax(0px, 1fr) auto auto auto;
}
#mentorView .mentor-chat-header {
border-bottom: 1px solid var(--mentor-line-soft);
background: rgb(255, 255, 255);
min-height: 69px;
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
}
#mentorView .mentor-active-profile {
min-width: 0px;
display: grid;
gap: 3px;
}
#mentorView .mentor-active-title {
min-width: 0px;
display: flex;
align-items: center;
gap: 7px;
}
#mentorView .mentor-active-title h3 {
min-width: 0px;
margin: 0px;
overflow: hidden;
color: var(--mentor-ink);
font-size: 14px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
#mentorView .mentor-active-profile > p {
max-width: min(760px, 72vw);
margin: 0px;
overflow: hidden;
color: var(--mentor-sub);
font-size: 10.5px;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
#mentorView .mentor-active-focus {
min-width: 0px;
display: flex;
align-items: center;
gap: 7px;
overflow: hidden;
}
#mentorView .mentor-active-focus span {
padding: 0px;
background: transparent;
color: var(--mentor-faint);
font-size: 9.5px;
white-space: nowrap;
}
#mentorView .mentor-active-focus span::before {
content: "#";
}
#mentorView .mentor-clear-button {
min-width: 0px;
min-height: 28px;
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
padding: 0px 8px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--mentor-blue);
font-size: 11px;
white-space: nowrap;
}
#mentorView .mentor-clear-button:hover:not(:disabled) {
border-color: var(--mentor-blue-line);
background: var(--mentor-blue-soft);
}
#mentorView .mentor-clear-button:disabled {
color: rgb(184, 190, 199);
opacity: 1;
}
#mentorView .mentor-clear-button .lucide {
width: 13px;
height: 13px;
}
#mentorView .mentor-messages {
min-width: 0px;
min-height: 0px;
max-height: none;
overflow-y: auto;
padding: 18px;
background: rgb(251, 252, 253);
scrollbar-color: rgb(215, 220, 228) transparent;
scrollbar-width: thin;
}
#mentorView .mentor-empty-state {
min-height: 100%;
display: grid;
place-content: center;
justify-items: center;
padding: 28px;
color: var(--mentor-faint);
text-align: center;
}
#mentorView .mentor-empty-mark {
width: 44px;
height: 40px;
display: grid;
place-items: center;
margin-bottom: 12px;
border: 0px;
border-radius: 8px;
background: rgb(243, 246, 251);
color: rgb(100, 130, 183);
}
#mentorView .mentor-empty-mark .lucide {
width: 21px;
height: 21px;
stroke-width: 1.65;
}
#mentorView .mentor-empty-state strong {
color: rgb(75, 85, 99);
font-size: 13px;
font-weight: 600;
}
#mentorView .mentor-empty-state p {
max-width: 580px;
margin: 7px auto 0px;
color: var(--mentor-faint);
font-size: 11.5px;
line-height: 1.7;
}
#mentorView .mentor-message {
width: fit-content;
max-width: min(84%, 820px);
margin: 0px 0px 12px;
padding: 10px 12px;
border: 1px solid var(--mentor-line);
border-radius: 8px;
background: rgb(255, 255, 255);
box-shadow: rgba(16, 24, 40, 0.024) 0px 1px 1px;
}
#mentorView .mentor-message.user {
margin-left: auto;
border-color: var(--mentor-blue-line);
background: var(--mentor-blue-soft);
}
#mentorView .mentor-message.assistant {
border-left: 2px solid var(--mentor-blue);
}
#mentorView .mentor-message-label {
margin-bottom: 5px;
color: var(--mentor-faint);
font-size: 10.5px;
font-weight: 650;
}
#mentorView .mentor-message-content {
margin: 0px;
overflow-wrap: anywhere;
color: rgb(55, 65, 81);
font-size: 13px;
line-height: 1.62;
white-space: normal;
}
#mentorView .mentor-message .mentor-answer-paragraph {
margin: 0px 0px 6px;
line-height: inherit;
}
#mentorView .mentor-message .mentor-answer-paragraph:last-child {
margin-bottom: 0px;
}
#mentorView .mentor-answer-heading {
display: block;
margin: 9px 0px 4px;
color: var(--mentor-ink);
font-size: 13px;
line-height: 1.45;
}
#mentorView .mentor-message-content > .mentor-answer-heading:first-child {
margin-top: 0px;
}
#mentorView .mentor-answer-list {
margin: 3px 0px 7px;
padding-left: 20px;
}
#mentorView .mentor-answer-list li + li {
margin-top: 3px;
}
#mentorView .mentor-answer-rule {
display: block;
height: 1px;
margin: 8px 0px;
background: var(--mentor-line);
}
#mentorView .mentor-answer-quote {
display: block;
padding-left: 9px;
border-left: 2px solid var(--mentor-blue);
color: var(--mentor-sub);
}
#mentorView .mentor-message small {
display: block;
margin-top: 7px;
color: var(--mentor-faint);
font-size: 9.5px;
}
#mentorView .mentor-message.is-error {
border-color: rgb(229, 165, 160);
}
#mentorView .mentor-quick-prompts {
min-height: 42px;
display: flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
overflow-x: auto;
border-top: 1px solid var(--mentor-line-soft);
background: rgb(255, 255, 255);
scrollbar-width: none;
}
#mentorView .mentor-quick-prompts::-webkit-scrollbar {
display: none;
}
#mentorView .mentor-prompt-label {
flex: 0 0 auto;
color: var(--mentor-faint);
font-size: 10.5px;
white-space: nowrap;
}
#mentorView .mentor-quick-prompts button {
min-height: 26px;
flex: 0 0 auto;
padding: 0px 10px;
border: 1px solid var(--mentor-line);
border-radius: 14px;
background: rgb(255, 255, 255);
color: var(--mentor-sub);
font-size: 11px;
white-space: nowrap;
cursor: pointer;
transition: border-color 150ms, color 150ms, background-color 150ms;
}
#mentorView .mentor-quick-prompts button:hover {
border-color: var(--mentor-blue-line);
background: var(--mentor-blue-soft);
color: var(--mentor-blue);
}
#mentorView .mentor-chat-form {
min-height: 55px;
display: grid;
grid-template-columns: minmax(0px, 1fr) auto;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-top: 1px solid var(--mentor-line-soft);
background: rgb(255, 255, 255);
}
#mentorView .mentor-chat-form textarea {
width: 100%;
min-width: 0px;
height: 38px;
min-height: 38px;
max-height: 88px;
padding: 8px 11px;
resize: vertical;
border: 1px solid var(--mentor-line);
border-radius: 8px;
outline: 0px;
background: rgb(255, 255, 255);
color: var(--mentor-ink);
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
font-family: inherit;
font-optical-sizing: inherit;
font-size-adjust: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-language-override: inherit;
font-size: 12.5px;
line-height: 1.55;
}
#mentorView .mentor-chat-form textarea:focus {
border-color: var(--mentor-blue-line);
box-shadow: rgba(37, 99, 235, 0.08) 0px 0px 0px 2px;
}
#mentorView .mentor-chat-form .button {
min-width: 76px;
height: 38px;
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0px 13px;
border-radius: 7px;
background: var(--mentor-blue);
color: rgb(255, 255, 255);
font-size: 12.5px;
}
#mentorView .mentor-chat-form .button:hover:not(:disabled) {
background: var(--mentor-blue-dark);
}
#mentorView .mentor-chat-form .button .lucide {
width: 14px;
height: 14px;
}
#mentorView .mentor-disclaimer {
min-height: 23px;
margin: 0px;
padding: 0px 14px 8px;
background: rgb(255, 255, 255);
color: var(--mentor-faint);
font-size: 9.5px;
text-align: right;
}
@media (min-width: 721px) and (max-width: 1100px) {
#mentorView .mentor-layout {
grid-template-columns: 292px minmax(0px, 1fr);
}
#mentorView .mentor-directory-title > span {
display: none;
}
#mentorView .mentor-active-profile > p {
max-width: 48vw;
}
}
@media (max-width: 720px) {
body.mentor-directory-open {
overflow: hidden;
}
#mentorView .mentor-page-header {
min-height: 84px;
align-items: flex-start;
flex-direction: column;
gap: 8px;
padding: 10px 12px 0px;
}
#mentorView .mentor-page-title {
width: 100%;
}
#mentorView .mentor-page-title h2 {
font-size: 17px;
}
#mentorView .mentor-page-title .section-subtitle {
font-size: 10.5px;
}
#mentorView .mentor-page-controls {
width: 100%;
margin: 0px;
}
#mentorView .mentor-evidence-filters {
width: 100%;
}
#mentorView .mentor-evidence-filters button {
min-height: 36px;
flex: 1 1 0%;
}
#mentorView .mentor-layout {
height: calc(100dvh - 286px - env(safe-area-inset-bottom));
min-height: 520px;
display: grid;
grid-template-columns: minmax(0px, 1fr);
grid-template-rows: 56px minmax(0px, 1fr);
gap: 8px;
padding: 0px 8px;
overflow: hidden;
}
#mentorView .mentor-sidebar {
height: 56px;
min-height: 56px;
overflow: visible;
border-radius: 9px;
}
#mentorView .mentor-directory-toggle {
width: 100%;
min-height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0px 12px;
border: 0px;
background: rgb(255, 255, 255);
color: var(--mentor-ink);
cursor: pointer;
text-align: left;
}
#mentorView .mentor-directory-toggle > span {
min-width: 0px;
display: flex;
align-items: center;
gap: 10px;
}
#mentorView .mentor-directory-toggle > span > span {
min-width: 0px;
display: grid;
gap: 2px;
}
#mentorView .mentor-directory-toggle small {
color: var(--mentor-faint);
font-size: 9px;
}
#mentorView .mentor-directory-toggle strong {
overflow: hidden;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
#mentorView .mentor-directory-toggle > .lucide {
width: 16px;
transition: transform 180ms;
}
#mentorView .mentor-sidebar.is-open .mentor-directory-toggle > .lucide {
transform: rotate(180deg);
}
#mentorView .mentor-directory-backdrop {
position: fixed;
inset: 0px;
z-index: 79;
display: block;
background: rgba(20, 27, 33, 0.48);
}
#mentorView .mentor-directory-content {
height: auto;
position: fixed;
inset: 62px 8px 72px;
z-index: 80;
overflow: hidden;
border: 1px solid var(--mentor-line);
border-radius: 10px;
box-shadow: rgba(16, 24, 40, 0.18) 0px 16px 36px;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: opacity 180ms, transform 180ms;
}
#mentorView .mentor-sidebar.is-open .mentor-directory-content {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
#mentorView .mentor-directory-close {
width: 38px;
height: 38px;
display: grid;
place-items: center;
}
#mentorView .mentor-sort-toggle {
min-height: 38px;
}
#mentorView .mentor-search-field {
height: 42px;
}
#mentorView .mentor-search-field input {
height: 40px;
font-size: 16px;
}
#mentorView .mentor-option {
min-height: 84px;
}
#mentorView .mentor-order-button,
#mentorView .mentor-pin-button {
width: 40px;
min-width: 40px;
height: 42px;
}
#mentorView .mentor-chat-panel {
height: 100%;
min-height: 0px;
border-radius: 9px;
}
#mentorView .mentor-chat-header {
min-height: 68px;
padding: 9px 10px;
}
#mentorView .mentor-active-profile > p,
#mentorView .mentor-active-focus {
max-width: calc(-130px + 100vw);
}
#mentorView .mentor-clear-button {
width: 36px;
height: 36px;
justify-content: center;
padding: 0px;
}
#mentorView .mentor-clear-button span {
display: none;
}
#mentorView .mentor-messages {
padding: 12px 10px;
}
#mentorView .mentor-empty-state {
padding: 16px;
}
#mentorView .mentor-empty-state p {
display: none;
}
#mentorView .mentor-message {
max-width: 92%;
}
#mentorView .mentor-quick-prompts {
padding-inline: 10px;
}
#mentorView .mentor-prompt-label {
display: none;
}
#mentorView .mentor-chat-form {
padding: 7px 9px;
}
#mentorView .mentor-chat-form .button {
min-width: 42px;
width: 42px;
padding: 0px;
}
#mentorView .mentor-chat-form .button span {
display: none;
}
#mentorView .mentor-disclaimer {
padding-inline: 10px;
font-size: 8.5px;
}
}
@media (prefers-reduced-motion: reduce) {
#mentorView .mentor-directory-content,
#mentorView .mentor-directory-toggle > .lucide,
#mentorView .mentor-evidence-filters button,
#mentorView .mentor-option,
#mentorView .mentor-quick-prompts button {
transition: none;
}
}
.mentor-grid {
display: grid;
grid-template-columns: 340px minmax(0px, 1fr);
gap: 12px;
align-items: start;
}
.chat-box {
display: flex;
flex-direction: column;
height: calc(-250px + 100vh);
min-height: 420px;
}
.chat-log {
flex: 1 1 0%;
overflow: auto;
padding: 18px;
}
@media (min-width: 721px) {
#mentorView #mentorNotice,
#mentorView .member-gate,
#mentorView .mentor-page-header {
flex: 0 0 auto;
}
#mentorView .mentor-layout {
min-height: 0px;
flex: 1 1 auto;
height: auto;
overflow: hidden;
}
#mentorView .chat-box,
#mentorView .mentor-chat-panel,
#mentorView .mentor-directory-content,
#mentorView .mentor-sidebar {
min-height: 0px;
height: 100%;
overflow: hidden;
}
#mentorView .mentor-list,
#mentorView .mentor-messages {
min-height: 0px;
overflow: auto;
}
}
:root[data-theme="dark"] :is(.global-search-result-icon, .membership-status-grid > div, .model-row) {
border-color: var(--border);
background: var(--surface-subtle);
}
:root[data-theme="dark"] :is(.mentor-option, .assistant-message-content) {
border-color: var(--border);
background: var(--surface-subtle);
color: var(--text-primary);
}
:root[data-theme="dark"] .mentor-option.active,
:root[data-theme="dark"] .mentor-option:hover {
background: var(--action-soft);
}
:root[data-theme="dark"] :is(.assistant-form, .trade-log-summary) {
border-color: var(--line-soft);
background: var(--surface);
}
: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(--line-soft);
--mentor-ink: var(--text-primary);
--mentor-sub: var(--text-secondary);
--mentor-faint: var(--text-tertiary);
}
:root[data-theme="dark"] #mentorView :is(.mentor-evidence-filters, .mentor-directory-content, .mentor-directory-heading, .mentor-search-field, .mentor-chat-panel, .mentor-option) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #mentorView :is(.mentor-evidence-filters button.active, .mentor-option.active) {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #mentorView :is(.mentor-badge.quality, .mentor-badge.private, .mentor-pin-button) {
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #mentorView .mentor-badge.grade-a {
background: var(--market-down-soft);
color: var(--market-down);
}
:root[data-theme="dark"] #mentorView .mentor-badge.grade-b {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #mentorView .mentor-badge.grade-c {
background: var(--warning-soft);
color: var(--warning-color);
}
:root[data-theme="dark"] #mentorView :is(.mentor-chat-header, .mentor-messages, .mentor-quick-prompts, .mentor-chat-form, .mentor-disclaimer, .mentor-quick-prompts button, #mentorQuestion) {
border-color: var(--border);
background: var(--surface);
color: var(--text-primary);
}
:root[data-theme="dark"] #mentorView :is(.mentor-messages, .mentor-empty-mark) {
background: var(--surface-muted);
}
: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 {
border-color: var(--blue-line);
background: var(--action-soft);
}
:root[data-theme="dark"] #mentorView :is(.mentor-message-content, .mentor-answer-heading, .loading-message p) {
color: var(--text-primary);
}
:root[data-theme="dark"] #mentorView .mentor-answer-quote {
color: var(--text-secondary);
}
:root[data-theme="dark"] #mentorView :is(.mentor-message-label, .mentor-message small) {
color: var(--text-tertiary);
}