/* Canonical CSS owner: mentor. Historical layers consolidated 2026-08-02. */ #mentorView.workspace-view { --qp-bg-header: #F5F6F7; --qp-bg-sidebar: #FFFFFF; --qp-bg-chat: #FFFFFF; --qp-bg-footer: #FDFDFD; --qp-border: #ECEDED; --qp-border-input: #DEE0E3; --qp-bg-control: #F2F3F5; --qp-bg-selected: #EAF1FE; --qp-bg-btn-active: #EBF1FE; --qp-bg-bubble-self: #D8E6FF; --qp-accent: #3370FF; --qp-accent-soft: #3370FF; --qp-link: #3370FF; --qp-text-1: #1F2329; --qp-text-1-on-accent-bg: #1F2329; --qp-text-2: #676B74; --qp-text-3: #8F959E; --qp-text-placeholder: #838892; --qp-text-hint: #969AA8; --qp-text-faint: #BBBDC2; --qp-icon-normal: #989EA6; --qp-icon-active: #3370FF; --qp-badge-pinned-ink: #3370FF; --qp-badge-pinned-bg: #E0E9FF; --qp-badge-a-ink: #F54A45; --qp-badge-a-bg: #FDECEB; --qp-badge-b-ink: #646A73; --qp-badge-b-bg: #F5F3EE; --qp-badge-c-ink: #2EA44F; --qp-badge-c-bg: #E6F6EE; --qp-avatar-bg: #E3F0FF; --qp-avatar-ink: #3370FF; --qp-input-shadow: 0 1px 2px rgba(31, 35, 41, .04), 0 4px 12px rgba(31, 35, 41, .05); height: 100%; min-height: 0; flex-direction: column; padding: 0; color: var(--qp-text-1); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; } :root[data-theme="dark"] #mentorView.workspace-view { --qp-bg-header: #141519; --qp-bg-sidebar: #1C1E23; --qp-bg-chat: #232529; --qp-bg-footer: #212327; --qp-border: #2B2E34; --qp-border-input: #3A3E47; --qp-bg-control: #2A2D33; --qp-bg-selected: #2B3B58; --qp-bg-btn-active: #2A3955; --qp-bg-bubble-self: #35598C; --qp-accent: #3D74E0; --qp-accent-soft: #5B8DEF; --qp-link: #316FEF; --qp-text-1: #E8EAED; --qp-text-1-on-accent-bg: #EAF1FB; --qp-text-2: #A9ADB3; --qp-text-3: #7C828A; --qp-text-placeholder: #898F95; --qp-text-hint: #798187; --qp-text-faint: #5C6063; --qp-icon-normal: #747981; --qp-icon-active: #5B8DEF; --qp-badge-pinned-ink: #5B8DEF; --qp-badge-pinned-bg: #2B3F66; --qp-badge-a-ink: #F26762; --qp-badge-a-bg: #3D2829; --qp-badge-b-ink: #A9ADB3; --qp-badge-b-bg: #3A3527; --qp-badge-c-ink: #5FCE8F; --qp-badge-c-bg: #22362C; --qp-avatar-bg: #2B3F66; --qp-avatar-ink: #7BA5F5; --qp-input-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 12px rgba(0, 0, 0, .35); } #mentorView.active-view { display: flex; } #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); overflow: hidden; } #mentorView .mentor-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--qp-border); background: var(--qp-bg-sidebar); } #mentorView .mentor-directory-tools { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-8); padding: 12px; border-bottom: 1px solid var(--qp-border); } #mentorView .mentor-search-field { min-width: 0; height: 32px; flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-8); padding: 0 10px; border: 1px solid var(--qp-border-input); border-radius: 8px; background: var(--qp-bg-control); color: var(--qp-text-placeholder); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } #mentorView .mentor-search-field:focus-within { border-color: var(--qp-accent); box-shadow: 0 0 0 2px rgba(51, 112, 255, .15); } :root[data-theme="dark"] #mentorView .mentor-search-field:focus-within { box-shadow: 0 0 0 2px rgba(51, 112, 255, .25); } #mentorView .mentor-search-field .lucide { width: 16px; height: 16px; flex: 0 0 auto; } #mentorView .mentor-search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--qp-text-1); font-size: 14px; } #mentorView .mentor-search-field input::placeholder { color: var(--qp-text-placeholder); } #mentorView .mentor-filter-menu { position: relative; flex: 0 0 auto; } #mentorView .mentor-filter-toggle { height: 32px; display: inline-flex; align-items: center; gap: var(--space-4); padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: var(--qp-bg-control); color: var(--qp-text-1); font-size: 14px; cursor: pointer; transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast); } #mentorView .mentor-filter-toggle:is(:hover, .active) { color: var(--qp-accent); } #mentorView .mentor-filter-toggle .lucide { width: 14px; height: 14px; } #mentorView .mentor-filter-options { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 128px; display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--qp-border-input); border-radius: 8px; background: var(--qp-bg-sidebar); box-shadow: 0 4px 14px rgba(16, 24, 40, .08); } :root[data-theme="dark"] #mentorView .mentor-filter-options { border-color: var(--qp-border); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); } #mentorView .mentor-filter-options[hidden] { display: none; } #mentorView .mentor-filter-options button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--qp-text-1); font-size: 14px; text-align: left; cursor: pointer; transition: color var(--motion-fast), background var(--motion-fast); } #mentorView .mentor-filter-options button span { color: var(--qp-text-3); font-size: 12px; } #mentorView .mentor-filter-options button:is(:hover, .active) { background: var(--qp-bg-selected); color: var(--qp-accent); font-weight: var(--font-weight-semibold); } #mentorView .mentor-sort-toggle { height: 32px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-4); padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--qp-text-2); font-size: 14px; cursor: pointer; transition: color var(--motion-fast), background var(--motion-fast); } #mentorView .mentor-sort-toggle:is(:hover, .active) { background: var(--qp-bg-control); color: var(--qp-accent); } #mentorView .mentor-sort-toggle .lucide { width: 16px; height: 16px; } #mentorView .mentor-sort-hint { flex: 0 0 auto; margin: 0; padding: 8px 12px; 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; padding: 4px 0; } #mentorView .mentor-option { position: relative; height: 75px; margin: 0 8px; display: flex; align-items: stretch; border-radius: 10px; background: transparent; transition: background var(--motion-fast), box-shadow var(--motion-fast); } #mentorView .mentor-option:is(:hover, :focus-within) { background: color-mix(in srgb, var(--qp-bg-control) 55%, transparent); } #mentorView .mentor-option.active { background: var(--qp-bg-selected); } #mentorView .mentor-option.is-dragging { opacity: .48; } #mentorView .mentor-option.is-drag-over { box-shadow: inset 0 2px 0 var(--qp-accent); } #mentorView .mentor-option-main { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 12px; padding: 0 4px 0 8px; 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: 0; border-radius: 50%; background: var(--qp-avatar-bg); color: var(--qp-avatar-ink); font-size: 16px; font-weight: var(--font-weight-semibold); } #mentorView .mentor-option-copy { min-width: 0; display: grid; flex: 1 1 auto; gap: 3px; } #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(--qp-text-1); font-size: 16px; 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: 14px; font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } #mentorView .mentor-option-copy > em { color: var(--qp-text-2); } #mentorView .mentor-option-meta { color: var(--qp-text-3); font-size: 13px; } #mentorView .mentor-option-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; padding-right: 4px; } #mentorView :is(.mentor-pin-button, .mentor-order-button) { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--qp-icon-normal); 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(--qp-bg-btn-active); color: var(--qp-icon-active); } #mentorView :is(.mentor-pin-button, .mentor-order-button) .lucide { width: 16px; height: 16px; } #mentorView :is(.mentor-list-empty, .mentor-evidence-legend) { margin: 0; color: var(--qp-text-hint); font-size: 12px; } #mentorView .mentor-list-empty { padding: var(--space-24) var(--space-12); text-align: center; } #mentorView .mentor-badge { height: 18px; display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border: 0; border-radius: 4px; font-size: 12px; font-weight: var(--font-weight-medium); line-height: 1; } #mentorView .mentor-badge .lucide { width: 12px; height: 12px; } #mentorView .mentor-badge.pinned { background: var(--qp-badge-pinned-bg); color: var(--qp-badge-pinned-ink); } #mentorView .mentor-badge.grade-a { background: var(--qp-badge-a-bg); color: var(--qp-badge-a-ink); } #mentorView .mentor-badge.grade-b { background: var(--qp-badge-b-bg); color: var(--qp-badge-b-ink); } #mentorView .mentor-badge.grade-c { background: var(--qp-badge-c-bg); color: var(--qp-badge-c-ink); } #mentorView .mentor-badge.private { 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(--qp-bg-chat); } #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 16px; border-bottom: 1px solid var(--qp-border); background: var(--qp-bg-chat); } #mentorView .mentor-chat-identity { min-width: 0; display: flex; align-items: center; gap: 12px; } #mentorView .mentor-chat-identity > div { min-width: 0; } #mentorView .mentor-chat-identity .mentor-avatar { width: 44px; height: 44px; flex: 0 0 44px; font-size: 17px; } #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(--qp-text-1); font-size: 16px; 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: 2px 0 0; color: var(--qp-text-3); font-size: 13px; line-height: 1.4; } #mentorView .mentor-chat-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; } #mentorView .mentor-header-action { width: 34px; height: 34px; min-height: 34px; background: transparent; color: var(--qp-icon-normal); font-size: 18px; } #mentorView .mentor-header-action:hover { background: var(--qp-bg-control); color: var(--qp-icon-active); } #mentorView .mentor-header-action.active { background: var(--qp-bg-btn-active); color: var(--qp-icon-active); } #mentorView .mentor-clear-button { flex: 0 0 auto; width: 34px; height: 34px; min-height: 34px; background: transparent; color: var(--qp-icon-normal); font-size: 18px; } #mentorView .mentor-clear-button:hover { background: var(--qp-bg-control); color: var(--qp-accent); } #mentorView .mentor-messages { min-height: 0; flex: 1 1 auto; overflow: hidden auto; padding: 20px 24px 20px 20px; 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(--qp-text-2); 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: 0; border-radius: 50%; background: var(--qp-avatar-bg); color: var(--qp-avatar-ink); } #mentorView .mentor-empty-mark .lucide { width: var(--font-size-metric); height: var(--font-size-metric); } #mentorView .mentor-empty-state strong { color: var(--qp-text-1); 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: 20px; margin-bottom: 22px; } #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: 0; border-radius: 50%; background: var(--qp-avatar-bg); color: var(--qp-avatar-ink); font-size: 16px; font-weight: var(--font-weight-semibold); } #mentorView .mentor-message-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } #mentorView .mentor-message.assistant .mentor-message-body { flex: 1 1 auto; } #mentorView .mentor-message.user .mentor-message-body { max-width: var(--mentor-message-max-width); align-items: flex-end; } #mentorView .mentor-message-label { color: var(--qp-text-3); font-size: 12px; line-height: 1.4; } #mentorView .mentor-message-content { min-width: 0; color: var(--qp-text-1); font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; } #mentorView .mentor-message.user .mentor-message-content { padding: 8px 14px; border-radius: 12px; background: var(--qp-bg-bubble-self); color: var(--qp-text-1-on-accent-bg); } #mentorView .mentor-message.is-error .mentor-message-content { color: var(--market-up); } #mentorView .mentor-message small { color: var(--qp-text-3); font-size: 12px; } #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(--qp-text-1); font-size: 18px; font-weight: var(--font-weight-semibold); line-height: 1.4; } #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(--qp-accent-soft); color: var(--qp-text-2); } #mentorView .mentor-answer-rule { display: block; height: 1px; margin: var(--space-12) 0; background: var(--qp-border); } #mentorView .mentor-loading-copy { margin: 0; color: var(--qp-text-2); } #mentorView .assistant-stream-caret { width: 2px; height: var(--font-size-body); display: inline-block; margin-left: var(--space-4); background: var(--qp-accent); animation: mentor-caret 900ms steps(1, end) infinite; } #mentorView .mentor-follow-ups { width: 100%; display: grid; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--qp-border); } #mentorView .mentor-follow-ups > span { color: var(--qp-text-faint); font-size: 12px; } #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(--qp-link); font-size: 14px; line-height: 1.8; text-align: left; cursor: pointer; transition: color var(--motion-fast), transform var(--motion-fast); } #mentorView .mentor-follow-ups button:hover { text-decoration: underline; color: var(--qp-link); } #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: 10px; padding: 12px 24px 0; } #mentorView .mentor-quick-prompts[hidden] { display: none; } #mentorView .mentor-prompt-label { flex: 0 0 auto; color: var(--qp-text-3); font-size: 13px; } #mentorView .mentor-quick-prompts button { height: 29px; display: inline-flex; align-items: center; gap: var(--space-4); padding: 0 12px; border: 0; border-radius: 8px; background: var(--qp-bg-control); color: var(--qp-text-2); font-size: 14px; cursor: pointer; transition: color var(--motion-fast), background var(--motion-fast); } #mentorView .mentor-quick-prompts button:hover { background: color-mix(in srgb, var(--qp-bg-control) 82%, var(--qp-text-1) 18%); color: var(--qp-text-1); } #mentorView .mentor-quick-prompts button .lucide { width: 15px; height: 15px; } #mentorView .mentor-chat-form { min-height: var(--mentor-composer-min-height); flex: 0 0 auto; display: flex; align-items: stretch; gap: var(--space-12); margin: 12px 24px 16px 21px; padding: 14px 16px; border: 1px solid var(--qp-border-input); border-radius: 12px; background: var(--qp-bg-footer); box-shadow: var(--qp-input-shadow); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } #mentorView .mentor-chat-form:focus-within { border-color: var(--qp-accent); box-shadow: 0 0 0 2px rgba(51, 112, 255, .15), var(--qp-input-shadow); } :root[data-theme="dark"] #mentorView .mentor-chat-form:focus-within { box-shadow: 0 0 0 2px rgba(51, 112, 255, .25), var(--qp-input-shadow); } #mentorView .mentor-composer-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); } #mentorView #mentorQuestion { width: 100%; min-width: 0; height: 27px; min-height: 27px; flex: 0 1 auto; align-self: flex-start; resize: none; overflow-y: hidden; border: 0; outline: 0; background: transparent; color: var(--qp-text-1); font-family: inherit; font-size: 16px; line-height: 1.7; } #mentorView #mentorQuestion::placeholder { color: var(--qp-text-placeholder); } #mentorView .mentor-composer-hint { flex: 0 0 auto; color: var(--qp-text-hint); font-size: 12px; line-height: 1.4; } #mentorView .mentor-composer-actions { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--space-8); } #mentorView .mentor-send-button { width: 71px; height: 31px; min-height: 31px; padding: 0; border: 0; border-radius: 10px; background: var(--qp-accent); color: #FFFFFF; font-size: 14px; font-weight: var(--font-weight-medium); } :root[data-theme="dark"] #mentorView .mentor-send-button { color: #FFFFFF; } #mentorView .mentor-send-button:hover { background: color-mix(in srgb, var(--qp-accent) 88%, #000 12%); color: #FFFFFF; } #mentorView .mentor-send-button:active { transform: scale(.97); } #mentorView .mentor-send-button .lucide { width: 15px; height: 15px; } #mentorView .mentor-stop-button { color: var(--market-up); } #mentorView .mentor-workspace-footer { flex: 0 0 28px; height: 28px; min-height: 28px; display: flex; align-items: center; border-top: 1px solid var(--qp-border); background: var(--qp-bg-footer); } #mentorView .mentor-workspace-footer .mentor-evidence-legend { flex: 0 0 var(--mentor-directory-width); padding-left: 15px; } #mentorView .mentor-disclaimer { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 16px; color: var(--qp-text-hint); font-size: 12px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; } #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: 0; border-radius: 50%; background: var(--qp-avatar-bg); color: var(--qp-avatar-ink); font-size: var(--font-size-metric); font-weight: var(--font-weight-semibold); } #mentorView .mentor-profile-hero h3 { margin: 0; color: var(--qp-text-1); 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(--qp-text-2); 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(--qp-border); } #mentorView .mentor-profile-section h4 { margin: 0; color: var(--qp-text-faint); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); } #mentorView .mentor-profile-section > strong { color: var(--qp-text-1); font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); } #mentorView .mentor-profile-section > p { margin: 0; color: var(--qp-text-2); 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(--qp-bg-control); color: var(--qp-text-2); 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(--qp-text-faint); } #mentorView .mentor-floating-dialog:not([open]) { display: none; } #mentorView .mentor-floating-dialog { position: fixed; inset: 0; margin: auto; width: 400px; max-width: calc(100vw - 24px); max-height: min(600px, calc(100dvh - 24px)); padding: 0; border: 1px solid var(--qp-border); border-radius: var(--radius-lg); background: var(--qp-bg-chat); color: var(--qp-text-1); box-shadow: var(--shadow-float); } #mentorView .mentor-floating-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); } #mentorView .mentor-dialog-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--qp-border); } #mentorView .mentor-dialog-head h3 { margin: 0; color: var(--qp-text-1); font-size: var(--font-size-page-title); font-weight: var(--font-weight-semibold); letter-spacing: 0; } #mentorView .mentor-dialog-close { color: var(--qp-text-2); } #mentorView .mentor-dialog-body { min-height: 0; padding: var(--space-16); } #mentorView .mentor-note-dialog { display: flex; flex-direction: column; } #mentorView .mentor-note-dialog .mentor-dialog-body { flex: 1 1 auto; display: flex; align-items: flex-start; overflow-y: auto; } #mentorView #mentorNoteInput { width: 100%; min-height: 120px; max-height: 320px; resize: vertical; border: 1px solid var(--qp-border); border-radius: var(--radius-md); background: var(--qp-bg-control); color: var(--qp-text-1); font-family: inherit; font-size: var(--font-size-body); line-height: 1.6; padding: var(--space-8) var(--space-12); } #mentorView #mentorNoteInput:focus { border-color: var(--qp-accent); outline: 0; } #mentorView .mentor-profile-dialog { display: flex; flex-direction: column; } #mentorView .mentor-profile-dialog-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding-bottom: var(--space-8); } #mentorView :is(button, input, textarea):focus-visible { outline: 2px solid var(--qp-accent); outline-offset: 2px; } @keyframes mentor-caret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #mentorView :is(.mentor-sort-toggle, .mentor-search-field, .mentor-filter-toggle, .mentor-filter-options button, .mentor-option, .mentor-pin-button, .mentor-order-button, .mentor-follow-ups button, .mentor-quick-prompts button, .mentor-send-button) { transition: none; } #mentorView .assistant-stream-caret { animation: none; } #mentorView .mentor-messages { scroll-behavior: auto; } } @media (max-width: 767px) { #mentorView .mentor-layout { grid-template-columns: minmax(0, 1fr); overflow: visible; } #mentorView .mentor-sidebar { max-height: 44vh; border-right: 0; border-bottom: 1px solid var(--qp-border); } #mentorView .mentor-chat-panel { overflow: visible; } #mentorView .mentor-messages { overflow: visible; max-height: none; } #mentorView .mentor-workspace-footer { flex-wrap: wrap; height: auto; min-height: 28px; } #mentorView .mentor-workspace-footer .mentor-evidence-legend { flex: 0 0 auto; padding-left: 12px; } }