Files
mnote/rust/crates/mnote-web/src/ssr/styles/components/page-ai.css
T

2217 lines
40 KiB
CSS

/* 仪表盘 */
.mnote-dashboard-panel {
padding: 4px 0;
}
.mnote-dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mnote-dashboard-card {
padding: 12px;
background: #F9F8F8;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mnote-dashboard-card-title {
font-size: 12px;
color: #AEADAB;
font-weight: 500;
}
.mnote-dashboard-card-value {
font-size: 18px;
font-weight: 700;
color: #1B1C1C;
}
.mnote-dashboard-card-desc {
font-size: 11px;
color: #AEADAB;
}
font-size: 13px;
color: #1B1C1C;
font-weight: 500;
min-width: 32px;
text-align: right;
}
color: #F09B26;
font-weight: 500;
}
.wolai-page-settings-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.wolai-page-settings-section[hidden] {
display: none !important;
}
.wolai-page-settings-index-panel {
display: flex;
flex-direction: column;
gap: 10px;
}
.wolai-page-settings-index-status {
color: #8B8782;
font-size: 12px;
line-height: 18px;
}
.wolai-page-settings-index-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.wolai-page-settings-index-title {
color: #1B1C1C;
font-size: 13px;
font-weight: 600;
line-height: 18px;
}
.wolai-page-settings-index-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.wolai-page-settings-index-range-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.wolai-page-settings-index-range-row {
display: grid;
grid-template-columns: 12px minmax(0, 1fr) 28px;
align-items: center;
gap: 8px;
}
.wolai-page-settings-index-status-dot {
width: 9px;
height: 9px;
border-radius: 999px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(27, 28, 28, 0.08);
}
.wolai-page-settings-index-status-dot[data-index-status="indexed"] {
background: #22C55E;
}
.wolai-page-settings-index-status-dot[data-index-status="indexing"] {
background: #F59E0B;
}
.wolai-page-settings-index-status-dot[data-index-status="fault"] {
background: #EF4444;
}
.wolai-page-settings-index-path {
width: 100%;
min-width: 0;
height: 32px;
border: 1px solid #E2DFDA;
border-radius: 6px;
padding: 0 9px;
background: #FFFFFF;
color: #1B1C1C;
font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
.wolai-page-settings-index-path:disabled {
background: #F7F6F4;
color: #A19D97;
}
.wolai-page-settings-index-root-hint {
color: #8B8782;
font-size: 11px;
white-space: nowrap;
}
.wolai-page-settings-index-remove,
.wolai-page-settings-index-add {
border: 1px solid #D8D4CE;
border-radius: 6px;
background: #FFFFFF;
color: #1B1C1C;
cursor: pointer;
font-size: 12px;
}
.wolai-page-settings-index-remove {
width: 28px;
height: 28px;
padding: 0;
font-size: 16px;
line-height: 1;
}
.wolai-page-settings-index-add {
width: fit-content;
min-height: 30px;
padding: 5px 10px;
}
.wolai-page-settings-index-remove:hover:not(:disabled),
.wolai-page-settings-index-add:hover:not(:disabled) {
background: #F4F3F3;
}
.wolai-page-settings-index-remove:disabled,
.wolai-page-settings-index-add:disabled {
cursor: default;
color: #A19D97;
background: #F7F6F4;
}
.wolai-page-settings-index-schedule {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(96px, .7fr);
gap: 8px;
}
.wolai-page-settings-index-schedule label {
display: flex;
min-width: 0;
flex-direction: column;
gap: 4px;
color: #8B8782;
font-size: 12px;
line-height: 16px;
}
.wolai-page-settings-index-schedule select,
.wolai-page-settings-index-schedule input[type="time"],
.wolai-page-settings-index-schedule input[type="date"] {
width: 100%;
min-height: 30px;
border: 1px solid #E2DFDA;
border-radius: 6px;
padding: 4px 8px;
background: #FFFFFF;
color: #1B1C1C;
font-size: 12px;
}
.wolai-page-settings-index-inline {
grid-column: 1 / -1;
flex-direction: row !important;
align-items: center;
}
.wolai-page-settings-index-inline input {
width: 14px;
height: 14px;
}
.wolai-page-settings-index-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wolai-page-settings-index-actions button {
min-height: 30px;
border: 1px solid #D8D4CE;
border-radius: 6px;
padding: 5px 10px;
background: #FFFFFF;
color: #1B1C1C;
cursor: pointer;
font-size: 12px;
}
.wolai-page-settings-index-row,
.wolai-page-settings-index-empty {
padding: 8px 10px;
border-radius: 8px;
background: #F7F6F4;
}
.wolai-page-settings-index-row {
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
}
.wolai-page-settings-index-row.is-tag {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.wolai-page-settings-index-row-title {
min-width: 0;
overflow: hidden;
color: #1B1C1C;
font-size: 13px;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-settings-index-row-meta,
.wolai-page-settings-index-row-snippet,
.wolai-page-settings-index-empty {
color: #8B8782;
font-size: 12px;
line-height: 18px;
}
.wolai-page-setting-row {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
}
.wolai-page-setting-row.is-pending {
opacity: 0.72;
}
.wolai-page-setting-copy {
display: flex;
min-width: 0;
flex-direction: column;
gap: 3px;
}
.wolai-page-setting-label {
color: #1B1C1C;
font-size: 14px;
line-height: 20px;
}
.wolai-page-setting-hint,
.wolai-page-settings-global-note {
color: #8B8782;
font-size: 12px;
line-height: 18px;
}
.wolai-page-setting-checkbox {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.wolai-page-setting-select {
min-width: 96px;
height: 30px;
padding: 0 10px;
border: 1px solid rgba(27, 28, 28, 0.1);
border-radius: 8px;
background: #FFF;
color: #1B1C1C;
font-size: 13px;
}
.wolai-page-settings-actions {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 4px;
border-top: 1px solid rgba(27, 28, 28, 0.06);
}
.wolai-page-settings-action {
min-height: 34px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: #1B1C1C;
font-size: 13px;
cursor: pointer;
}
.wolai-page-settings-action:hover {
background: #F4F3F3;
}
.wolai-page-settings-action.is-disabled {
color: #A19D97;
cursor: not-allowed;
}
.wolai-page-settings-action.is-danger {
color: #C44B55;
}
.wolai-page-settings-stats {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
padding-top: 4px;
color: #8B8782;
font-size: 12px;
line-height: 18px;
}
.wolai-page-history-drawer {
position: fixed;
inset: 0;
z-index: var(--wolai-z-popover);
background: rgba(27, 28, 28, 0.04);
}
.wolai-page-history-drawer[hidden] {
display: none !important;
}
.wolai-page-history-panel {
position: absolute;
top: 16px;
right: 16px;
bottom: 16px;
width: min(380px, calc(100vw - 24px));
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px;
border-left: 1px solid rgba(27, 28, 28, 0.08);
background: #FFF;
box-shadow: -18px 0 42px rgba(27, 28, 28, 0.12);
}
.wolai-page-history-header,
.wolai-page-share-header,
.wolai-page-ai-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.wolai-page-history-title,
.wolai-page-share-title,
.wolai-page-ai-title {
color: #1B1C1C;
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
.wolai-page-history-subtitle,
.wolai-page-share-subtitle,
.wolai-page-ai-subtitle {
color: #8B8782;
font-size: 12px;
line-height: 18px;
}
.wolai-surface-close {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: transparent;
color: #5A5A5A;
cursor: pointer;
}
.wolai-surface-close:hover {
background: #F4F3F3;
}
.wolai-page-history-list {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 10px;
overflow: auto;
}
.wolai-page-history-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 10px;
background: #FFF;
}
.wolai-page-history-item-title {
color: #1B1C1C;
font-size: 13px;
font-weight: 500;
line-height: 20px;
}
.wolai-page-history-item-meta,
.wolai-page-history-empty,
.wolai-page-share-copy,
.wolai-page-share-footer,
.wolai-page-ai-empty,
.wolai-page-ai-message-role {
color: #8B8782;
font-size: 12px;
line-height: 18px;
}
.wolai-page-history-item-ghost,
.wolai-page-ai-ghost,
.wolai-page-ai-tab,
.wolai-page-ai-model-chip,
.wolai-page-share-copy-button {
height: 30px;
padding: 0 10px;
border: 0;
border-radius: 8px;
background: #F4F3F3;
color: #1B1C1C;
font-size: 12px;
cursor: pointer;
}
.wolai-page-ai-ghost--danger {
color: #B33A3A;
}
.wolai-page-share-dialog {
position: fixed;
inset: 0;
z-index: var(--wolai-z-popover);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(27, 28, 28, 0.12);
}
.wolai-page-share-dialog[hidden] {
display: none !important;
}
.wolai-page-share-card {
width: min(460px, calc(100vw - 24px));
display: flex;
flex-direction: column;
gap: 16px;
padding: 18px;
border-radius: 16px;
background: #FFF;
box-shadow: 0 18px 48px rgba(27, 28, 28, 0.18);
}
.wolai-page-share-state {
display: flex;
flex-direction: column;
gap: 8px;
}
.wolai-public-pill--inline {
width: fit-content;
}
.wolai-page-share-url-row {
display: flex;
gap: 8px;
}
.wolai-page-share-url {
flex: 1 1 auto;
height: 34px;
padding: 0 10px;
border: 1px solid rgba(27, 28, 28, 0.1);
border-radius: 8px;
background: #FFF;
color: #1B1C1C;
font-size: 13px;
}
.wolai-page-ai-drawer {
position: fixed;
top: 12px;
right: 12px;
bottom: 12px;
z-index: var(--wolai-z-popover);
--mnote-page-ai-width: 440px;
}
.wolai-page-ai-drawer[hidden] {
display: none !important;
}
.wolai-page-ai-panel {
width: min(var(--mnote-page-ai-width), calc(100vw - 24px));
height: 100%;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.98);
box-shadow: -18px 0 42px rgba(27, 28, 28, 0.14);
}
.wolai-page-ai-resize-handle {
position: absolute;
top: 10px;
bottom: 10px;
left: -6px;
width: 12px;
cursor: col-resize;
touch-action: none;
}
.wolai-page-ai-resize-handle::before {
position: absolute;
top: 14px;
bottom: 14px;
left: 5px;
width: 2px;
border-radius: 999px;
background: transparent;
content: "";
}
.wolai-page-ai-resize-handle:hover::before,
.wolai-page-ai-drawer[data-page-ai-resizing="true"] .wolai-page-ai-resize-handle::before {
background: rgba(27, 28, 28, 0.18);
}
html[data-mnote-page-ai-resizing="true"] {
cursor: col-resize;
user-select: none;
}
.wolai-page-ai-header-copy {
display: flex;
flex-direction: column;
gap: 4px;
}
.wolai-page-ai-header-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.wolai-page-ai-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: transparent;
color: #5A5A5A;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.wolai-page-ai-icon-svg {
width: 16px;
height: 16px;
display: block;
fill: currentColor;
}
.wolai-page-ai-icon:hover,
.wolai-page-ai-icon.is-active {
background: #F3F3F2;
color: #1B1C1C;
}
.wolai-page-ai-statuslabel,
.wolai-page-ai-profile-select span,
.wolai-page-ai-context-select span,
.wolai-page-ai-skill-search span,
.wolai-page-ai-memory-scope,
.wolai-page-ai-skill-source {
display: block;
color: #8B8782;
font-size: 11px;
line-height: 16px;
}
.wolai-page-ai-subtitle {
display: flex;
min-width: 0;
flex-wrap: wrap;
gap: 4px 8px;
}
.wolai-page-ai-subtitle span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-subtitle span:not(:first-child)::before,
.wolai-page-ai-chat-meta span:not(:first-child)::before {
margin-right: 8px;
color: #C9C5BE;
content: "·";
}
.wolai-page-ai-runtime-strip {
display: flex;
width: 100%;
min-height: 28px;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 0 14px 8px;
border: 0;
background: transparent;
color: #6B6762;
cursor: pointer;
font-size: 11px;
line-height: 16px;
text-align: left;
}
.wolai-page-ai-runtime-strip:hover span {
border-color: rgba(27, 28, 28, 0.16);
background: #F1F1EF;
}
.wolai-page-ai-runtime-strip span {
max-width: 100%;
overflow: hidden;
padding: 2px 6px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 6px;
background: #F8F8F7;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-statusvalue {
display: block;
min-width: 0;
overflow: hidden;
color: #1B1C1C;
font-size: 12px;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-settings-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 10px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 8px;
background: #FFF;
color: #1B1C1C;
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
.wolai-page-ai-settings-link:disabled {
color: #AAA6A0;
cursor: not-allowed;
}
.wolai-page-ai-settings-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 132px;
gap: 8px;
}
.wolai-page-ai-profile-select,
.wolai-page-ai-context-select,
.wolai-page-ai-skill-search,
.wolai-page-ai-agent-profile {
display: grid;
gap: 4px;
min-width: 0;
}
.wolai-page-ai-profile-select select,
.wolai-page-ai-context-select select,
.wolai-page-ai-skill-search input,
.wolai-page-ai-skill-search select,
.wolai-page-ai-agent-profile select {
width: 100%;
min-width: 0;
height: 34px;
padding: 0 10px;
border: 1px solid rgba(27, 28, 28, 0.12);
border-radius: 8px;
background: #FFF;
color: #1B1C1C;
font-size: 12px;
}
.wolai-page-ai-agent-profile {
margin-top: 8px;
}
.wolai-page-ai-inline-error {
padding: 8px 10px;
border: 1px solid rgba(198, 80, 80, 0.18);
border-radius: 8px;
background: #FFF5F5;
color: #9F2D2D;
font-size: 12px;
line-height: 18px;
}
.wolai-page-ai-body {
display: flex;
min-height: 0;
flex: 1 1 auto;
flex-direction: column;
gap: 10px;
}
.wolai-page-ai-panel-section {
display: flex;
min-height: 0;
flex: 1 1 auto;
flex-direction: column;
gap: 10px;
}
.wolai-page-ai-panel-section[hidden] {
display: none !important;
}
.wolai-page-ai-drawer:not([data-page-ai-page="chat"]) .wolai-page-ai-footer {
display: none;
}
.wolai-page-ai-chat-meta {
display: flex;
min-height: 24px;
align-items: center;
gap: 8px;
overflow: hidden;
color: #8B8782;
font-size: 11px;
line-height: 16px;
}
.wolai-page-ai-session-summary {
min-width: 0;
max-width: 190px;
overflow: hidden;
padding: 0;
color: #5A5A5A;
font: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-settings-head {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
align-items: center;
}
.wolai-page-ai-back {
height: 30px;
padding: 0 8px;
border: 0;
border-radius: 6px;
background: transparent;
color: #5A5A5A;
font-size: 12px;
cursor: pointer;
}
.wolai-page-ai-back:hover {
background: #F3F3F2;
color: #1B1C1C;
}
.wolai-page-ai-settings-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
padding: 2px;
border-radius: 8px;
background: #F3F3F2;
}
.wolai-page-ai-suggestions {
display: flex;
flex-direction: column;
gap: 8px;
}
.wolai-page-ai-suggestions[hidden] {
display: none !important;
}
.wolai-page-ai-suggestions-header,
.wolai-page-ai-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.wolai-page-ai-intents {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.wolai-page-ai-suggestion-list,
.wolai-page-ai-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wolai-page-ai-tools-panel {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 8px;
background: #FAFAFA;
}
.wolai-page-ai-tools-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: #8B8782;
font-size: 11px;
line-height: 16px;
}
.wolai-page-ai-tools-head span:last-child {
min-width: 0;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-tool-list {
display: grid;
max-height: 140px;
gap: 6px;
overflow: auto;
}
[data-page-ai-tool-list].wolai-page-ai-tool-list {
max-height: min(420px, calc(100vh - 330px));
}
.wolai-page-ai-tool-row {
display: grid;
gap: 2px;
padding: 6px 8px;
border-radius: 8px;
background: #FFF;
}
.wolai-page-ai-tool-name {
overflow: hidden;
color: #1B1C1C;
font-size: 12px;
font-weight: 600;
line-height: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-tool-meta {
overflow: hidden;
color: #8B8782;
font-size: 11px;
line-height: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-changed-files {
overflow: auto;
text-overflow: clip;
white-space: pre-wrap;
}
.wolai-page-ai-provider-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wolai-page-ai-suggestion {
min-height: 30px;
padding: 6px 9px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 8px;
background: #FFF;
color: #1B1C1C;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.wolai-page-ai-conversation {
display: flex;
min-height: 0;
flex: 1 1 auto;
flex-direction: column;
gap: 10px;
overflow: auto;
}
.wolai-page-ai-memory-grid {
display: flex;
min-height: 0;
flex: 1 1 auto;
flex-direction: column;
gap: 10px;
overflow: auto;
}
.wolai-page-ai-settings-stack {
display: grid;
gap: 10px;
}
.wolai-page-ai-memory-card {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 8px;
background: #FFF;
}
.wolai-page-ai-memory-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.wolai-page-ai-memory-title,
.wolai-page-ai-skill-name {
color: #1B1C1C;
font-size: 13px;
font-weight: 600;
line-height: 18px;
}
.wolai-page-ai-memory-editor {
width: 100%;
min-height: 118px;
padding: 10px;
border: 1px solid rgba(27, 28, 28, 0.1);
border-radius: 8px;
background: #FAFAFA;
color: #1B1C1C;
font-size: 12px;
line-height: 18px;
resize: vertical;
}
.wolai-page-ai-skills-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: end;
gap: 8px;
}
.wolai-page-ai-skill-filter-toggle {
display: inline-flex;
grid-column: 1 / -1;
min-height: 34px;
align-items: center;
gap: 6px;
color: #5A5A5A;
font-size: 12px;
line-height: 18px;
white-space: nowrap;
}
.wolai-page-ai-skill-filter-toggle input {
width: 14px;
height: 14px;
margin: 0;
}
.wolai-page-ai-skill-list {
display: flex;
min-height: 0;
flex: 1 1 auto;
flex-direction: column;
gap: 4px;
overflow: auto;
}
.wolai-page-ai-skill-group {
display: grid;
gap: 4px;
}
.wolai-page-ai-skill-group-head {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 8px 2px;
border: 0;
border-radius: 6px;
background: transparent;
color: #8B8782;
font-size: 11px;
line-height: 16px;
cursor: pointer;
}
.wolai-page-ai-skill-group-head:hover {
background: #F7F7F6;
color: #5A5A5A;
}
.wolai-page-ai-skill-group-title {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 5px;
}
.wolai-page-ai-skill-group-chevron {
width: 12px;
color: #AAA6A0;
text-align: center;
}
.wolai-page-ai-skill-row {
display: flex;
min-height: 38px;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 8px;
border: 0;
border-radius: 6px;
background: transparent;
}
.wolai-page-ai-skill-row:hover {
background: #F7F7F6;
}
.wolai-page-ai-skill-copy {
display: grid;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.wolai-page-ai-skill-main {
display: grid;
min-width: 0;
gap: 2px;
}
.wolai-page-ai-skill-name {
min-width: 0;
overflow: visible;
text-overflow: clip;
white-space: normal;
word-break: break-word;
}
.wolai-page-ai-skill-desc {
overflow: hidden;
color: #5A5A5A;
font-size: 11px;
line-height: 15px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: clip;
white-space: normal;
}
.wolai-page-ai-skill-source {
padding: 0;
border-radius: 0;
background: transparent;
color: #8B8782;
font-size: 10px;
line-height: 14px;
white-space: normal;
word-break: break-word;
}
.wolai-page-ai-skill-switch {
position: relative;
width: 32px;
height: 18px;
flex: 0 0 32px;
border: 0;
border-radius: 999px;
background: #D8D6D1;
cursor: pointer;
}
.wolai-page-ai-skill-switch span {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #FFF;
box-shadow: 0 1px 3px rgba(27, 28, 28, 0.16);
transition: transform 0.16s ease;
}
.wolai-page-ai-skill-switch.is-on {
background: #F97316;
}
.wolai-page-ai-skill-switch.is-on span {
transform: translateX(14px);
}
.wolai-page-ai-skill-readonly-badge {
flex: 0 0 auto;
margin-top: 2px;
padding: 2px 6px;
border-radius: 999px;
background: #F0EFED;
color: #8B8782;
font-size: 10px;
line-height: 14px;
}
.wolai-page-ai-message {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
border-radius: 12px;
background: #F7F7F7;
}
.wolai-page-ai-message--history {
position: relative;
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto;
width: 100%;
min-height: 58px;
align-items: flex-start;
gap: 6px;
padding: 8px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 8px;
text-align: left;
}
.wolai-page-ai-message--history.is-active {
border-color: rgba(27, 28, 28, 0.28);
background: #F4F8FF;
}
.wolai-page-ai-message--history.is-selected {
border-color: rgba(37, 99, 235, 0.36);
background: #F5F8FF;
}
.wolai-page-ai-history-selection {
display: flex;
min-width: 0;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: #5A5A5A;
font-size: 12px;
line-height: 18px;
}
.wolai-page-ai-history-selection[hidden] {
display: none !important;
}
.wolai-page-ai-session-check {
width: 20px;
height: 20px;
margin-top: 1px;
padding: 0;
border: 1px solid rgba(27, 28, 28, 0.18);
border-radius: 6px;
background: #FFF;
color: #2563EB;
cursor: pointer;
opacity: 0;
}
.wolai-page-ai-session-check span {
display: grid;
width: 100%;
height: 100%;
place-items: center;
font-size: 12px;
line-height: 1;
}
.wolai-page-ai-message--history:hover .wolai-page-ai-session-check,
.wolai-page-ai-message--history:focus-within .wolai-page-ai-session-check,
.wolai-page-ai-message--history.is-selected .wolai-page-ai-session-check {
opacity: 1;
}
.wolai-page-ai-session-check[aria-checked="true"] {
border-color: rgba(37, 99, 235, 0.5);
background: #EAF1FF;
}
.wolai-page-ai-message--user {
background: #F4F8FF;
}
.wolai-page-ai-message[data-page-ai-streaming="true"] .wolai-page-ai-message-role::after {
content: " · 输出中";
}
.wolai-page-ai-message-text {
color: #1B1C1C;
font-size: 13px;
line-height: 20px;
white-space: pre-wrap;
}
.wolai-page-ai-message-text > * {
white-space: normal;
}
.wolai-page-ai-message-text p,
.wolai-page-ai-message-text ul,
.wolai-page-ai-message-text ol,
.wolai-page-ai-message-text pre,
.wolai-page-ai-message-text table {
margin: 6px 0;
}
.wolai-page-ai-message-text h1,
.wolai-page-ai-message-text h2,
.wolai-page-ai-message-text h3,
.wolai-page-ai-message-text h4,
.wolai-page-ai-message-text h5,
.wolai-page-ai-message-text h6 {
margin: 8px 0 4px;
color: #1B1C1C;
font-size: 14px;
font-weight: 700;
line-height: 20px;
}
.wolai-page-ai-message-text ul,
.wolai-page-ai-message-text ol {
padding-left: 18px;
}
.wolai-page-ai-message-text a {
color: #2563EB;
overflow-wrap: anywhere;
text-decoration: underline;
text-underline-offset: 2px;
}
.wolai-page-ai-message-text pre {
overflow: auto;
padding: 8px 10px;
border-radius: 6px;
background: #F7F6F4;
font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
.wolai-page-ai-message-text code {
border-radius: 4px;
padding: 1px 3px;
background: #F1F0EE;
font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
.wolai-page-ai-message-text pre code {
padding: 0;
background: transparent;
}
.wolai-page-ai-message-text hr {
height: 1px;
margin: 8px 0;
border: 0;
background: rgba(27, 28, 28, 0.12);
}
.wolai-page-ai-plan-card {
gap: 10px;
border: 1px solid rgba(14, 116, 144, 0.22);
background: #F0F9FF;
color: #0F172A;
}
.wolai-page-ai-plan-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.wolai-page-ai-plan-card-title-wrap {
display: grid;
min-width: 0;
gap: 1px;
}
.wolai-page-ai-plan-card-kicker {
color: #0369A1;
font-size: 11px;
line-height: 16px;
font-weight: 600;
}
.wolai-page-ai-plan-card-title {
color: #0C4A6E;
font-size: 14px;
line-height: 20px;
}
.wolai-page-ai-plan-card-badge {
display: inline-flex;
flex-shrink: 0;
align-items: center;
border-radius: 999px;
padding: 2px 8px;
background: #BAE6FD;
color: #075985;
font-size: 11px;
line-height: 16px;
font-weight: 600;
}
.wolai-page-ai-plan-card-markdown {
display: grid;
gap: 6px;
color: #1E293B;
font-size: 13px;
line-height: 20px;
}
.wolai-page-ai-plan-card-markdown > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.wolai-page-ai-plan-card-markdown .wolai-page-ai-markdown-table-wrap {
border: 1px solid rgba(14, 116, 144, 0.16);
border-radius: 8px;
background: rgba(255, 255, 255, 0.72);
}
.wolai-page-ai-plan-step-list {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.wolai-page-ai-plan-step-item {
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
padding: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: 8px;
background: rgba(255, 255, 255, 0.78);
color: #334155;
font-size: 12px;
line-height: 18px;
}
.wolai-page-ai-plan-step-item[data-status="completed"] {
border-color: rgba(16, 185, 129, 0.28);
background: rgba(236, 253, 245, 0.88);
}
.wolai-page-ai-plan-step-item[data-status="inProgress"] {
border-color: rgba(245, 158, 11, 0.28);
background: rgba(255, 251, 235, 0.9);
}
.wolai-page-ai-plan-step-status {
display: inline-flex;
width: 18px;
height: 18px;
flex: 0 0 18px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #E2E8F0;
color: #475569;
font-size: 11px;
line-height: 18px;
font-weight: 700;
}
.wolai-page-ai-plan-step-status[data-status="completed"] {
background: #BBF7D0;
color: #166534;
}
.wolai-page-ai-plan-step-status[data-status="inProgress"] {
background: #FDE68A;
color: #92400E;
}
.wolai-page-ai-plan-step-text {
min-width: 0;
overflow-wrap: anywhere;
}
.wolai-page-ai-plan-card-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.wolai-page-ai-plan-card-button {
height: 30px;
padding: 0 10px;
border: 1px solid rgba(14, 116, 144, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.86);
color: #0F172A;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.wolai-page-ai-plan-card-button--primary {
border-color: #0284C7;
background: #0284C7;
color: #FFFFFF;
}
.wolai-page-ai-plan-card-button--danger {
color: #B33A3A;
}
.wolai-page-ai-permission-card {
gap: 10px;
border: 1px solid rgba(180, 83, 9, 0.18);
background: #FFF7ED;
}
.wolai-page-ai-permission-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.wolai-page-ai-permission-badge {
display: inline-flex;
flex-shrink: 0;
align-items: center;
border-radius: 999px;
padding: 2px 8px;
background: #FED7AA;
color: #9A3412;
font-size: 11px;
line-height: 16px;
font-weight: 600;
}
.wolai-page-ai-permission-summary {
display: grid;
gap: 6px;
}
.wolai-page-ai-permission-row {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 8px;
align-items: start;
padding: 7px 8px;
border: 1px solid rgba(180, 83, 9, 0.12);
border-radius: 8px;
background: rgba(255, 255, 255, 0.74);
}
.wolai-page-ai-permission-row span {
color: #9A3412;
font-size: 11px;
line-height: 17px;
font-weight: 600;
}
.wolai-page-ai-permission-row strong {
min-width: 0;
overflow-wrap: anywhere;
color: #1B1C1C;
font-size: 12px;
line-height: 18px;
font-weight: 600;
}
.wolai-page-ai-permission-card .wolai-page-ai-message-actions,
.wolai-page-ai-permission-dialog .wolai-page-ai-message-actions {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.wolai-page-ai-markdown-table-wrap {
max-width: 100%;
overflow-x: auto;
}
.wolai-page-ai-markdown-table-wrap table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
background: #FFFFFF;
}
.wolai-page-ai-markdown-table-wrap th,
.wolai-page-ai-markdown-table-wrap td {
min-width: 72px;
border: 1px solid rgba(27, 28, 28, 0.12);
padding: 5px 7px;
text-align: left;
vertical-align: top;
}
.wolai-page-ai-markdown-table-wrap th {
background: #F7F6F4;
font-weight: 700;
}
button.wolai-page-ai-message-text {
width: 100%;
border: 0;
padding: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
button.wolai-page-ai-history-main {
display: grid;
gap: 1px;
min-width: 0;
}
button.wolai-page-ai-history-main strong,
button.wolai-page-ai-history-main span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-message-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.wolai-page-ai-history-actions {
grid-column: 3;
grid-row: 1;
position: static;
z-index: 2;
flex-wrap: nowrap;
justify-content: flex-end;
opacity: 1;
pointer-events: auto;
background: transparent;
}
.wolai-page-ai-message--history:hover .wolai-page-ai-history-actions,
.wolai-page-ai-message--history:focus-within .wolai-page-ai-history-actions {
opacity: 1;
pointer-events: auto;
}
.wolai-page-ai-permission-dialog {
position: fixed;
right: 28px;
bottom: 28px;
z-index: var(--wolai-z-dock);
max-width: min(360px, calc(100vw - 32px));
}
.wolai-page-ai-permission-panel {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid rgba(27, 28, 28, 0.12);
border-radius: 8px;
background: #FFFFFF;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
}
.wolai-page-ai-tool-details {
display: grid;
gap: 6px;
}
.wolai-page-ai-tool-details summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
color: #1B1C1C;
cursor: pointer;
list-style: none;
}
.wolai-page-ai-tool-details summary::-webkit-details-marker {
display: none;
}
.wolai-page-ai-tool-details summary::before {
content: "▸";
color: #8B8782;
}
.wolai-page-ai-tool-details[open] summary::before {
content: "▾";
}
.wolai-page-ai-tool-details summary strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-tool-details summary span {
min-width: 0;
overflow: hidden;
color: #8B8782;
font-size: 11px;
line-height: 16px;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-tool-group-list {
display: grid;
gap: 8px;
margin-top: 8px;
}
.wolai-page-ai-thought-group-list {
min-width: 0;
margin-top: 8px;
padding-left: 10px;
border-left: 2px solid rgba(27, 28, 28, 0.12);
color: #6F6B66;
font-size: 12px;
line-height: 18px;
white-space: pre-wrap;
}
.wolai-page-ai-tool-item {
display: grid;
gap: 4px;
min-width: 0;
padding: 8px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 6px;
background: rgba(255, 255, 255, 0.58);
}
.wolai-page-ai-tool-item-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
gap: 8px;
align-items: center;
}
.wolai-page-ai-tool-item-head strong {
min-width: 0;
overflow: hidden;
color: #1B1C1C;
font-size: 12px;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-tool-item-head span {
min-width: 0;
overflow: hidden;
color: #8B8782;
font-size: 11px;
line-height: 16px;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-footer {
position: relative;
z-index: var(--wolai-z-dock);
display: flex;
flex-direction: column;
gap: 8px;
}
.wolai-page-ai-tab {
min-height: 28px;
padding: 0 8px;
border: 0;
border-radius: 6px;
background: transparent;
color: #5A5A5A;
font-size: 12px;
cursor: pointer;
}
.wolai-page-ai-tab.is-active {
background: #1B1C1C;
color: #FFF;
}
.wolai-page-ai-model-chip.is-active {
background: #1B1C1C;
color: #FFF;
}
.wolai-page-ai-composer {
position: relative;
z-index: 20;
display: flex;
flex-direction: column;
overflow: visible;
border: 1px solid rgba(27, 28, 28, 0.12);
border-radius: 10px;
background: #FFF;
}
.wolai-page-ai-allowed-roots {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 6px 8px 0;
}
.wolai-page-ai-agent-picker,
.wolai-page-ai-context-picker,
.wolai-page-ai-target-picker {
position: relative;
flex: 0 0 auto;
}
.wolai-page-ai-agent-button,
.wolai-page-ai-context-button,
.wolai-page-ai-target-button {
font-size: 17px;
line-height: 1;
}
.wolai-page-ai-agent-button[aria-expanded="true"],
.wolai-page-ai-context-button[aria-expanded="true"],
.wolai-page-ai-target-button[aria-expanded="true"] {
border-color: rgba(27, 28, 28, 0.32);
background: #F7F6F4;
}
.wolai-page-ai-agent-chip,
.wolai-page-ai-target-chip {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 180px;
height: 26px;
padding: 0 8px;
border: 1px solid rgba(27, 28, 28, 0.1);
border-radius: 999px;
background: #F7F6F4;
color: #5A5A5A;
font-size: 12px;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-agent-popover,
.wolai-page-ai-context-popover,
.wolai-page-ai-target-popover {
position: absolute;
left: 0;
width: min(320px, calc(100vw - 44px));
bottom: calc(100% + 8px);
z-index: var(--wolai-z-popover);
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid rgba(27, 28, 28, 0.12);
border-radius: 10px;
background: #FFF;
box-shadow: 0 16px 36px rgba(27, 28, 28, 0.16);
}
.wolai-page-ai-agent-popover[hidden],
.wolai-page-ai-context-popover[hidden],
.wolai-page-ai-target-popover[hidden] {
display: none !important;
}
.wolai-page-ai-context-popover-head,
.wolai-page-ai-context-popover-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: #5A5A5A;
font-size: 12px;
}
.wolai-page-ai-context-option-list {
display: grid;
gap: 8px;
}
.wolai-page-ai-agent-option-list,
.wolai-page-ai-target-option-list {
display: grid;
gap: 6px;
}
.wolai-page-ai-agent-popover-section {
display: grid;
gap: 6px;
}
.wolai-page-ai-agent-popover-title {
color: #8B8782;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.wolai-page-ai-agent-option,
.wolai-page-ai-target-option {
display: grid;
gap: 2px;
width: 100%;
padding: 8px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 8px;
background: #FFF;
color: #1B1C1C;
text-align: left;
cursor: pointer;
}
.wolai-page-ai-agent-option.is-active,
.wolai-page-ai-target-option.is-active {
border-color: rgba(27, 28, 28, 0.2);
background: #F7F6F4;
}
.wolai-page-ai-agent-option-label,
.wolai-page-ai-target-option-label {
font-size: 12px;
font-weight: 600;
}
.wolai-page-ai-agent-option-detail,
.wolai-page-ai-target-option-detail {
color: #8B8782;
font-size: 11px;
}
.wolai-page-ai-context-option {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
gap: 8px;
align-items: start;
color: #1B1C1C;
font-size: 12px;
}
.wolai-page-ai-context-option.is-disabled {
color: #AAA6A0;
}
.wolai-page-ai-context-option-main {
display: grid;
gap: 2px;
min-width: 0;
}
.wolai-page-ai-context-option-label {
font-weight: 500;
}
.wolai-page-ai-context-option-detail {
color: #8B8782;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wolai-page-ai-allowed-roots {
padding-top: 4px;
}
.wolai-page-ai-composer:focus-within {
border-color: rgba(27, 28, 28, 0.32);
}
.wolai-page-ai-reasonix-controls {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
padding: 0 8px 6px;
}
.wolai-page-ai-reasonix-controls[hidden] {
display: none !important;
}
.wolai-page-ai-reasonix-control {
display: grid;
gap: 2px;
min-width: 0;
color: #8B8782;
font-size: 11px;
}
.wolai-page-ai-reasonix-control select {
width: 100%;
min-width: 0;
height: 28px;
padding: 0 8px;
border: 1px solid rgba(27, 28, 28, 0.1);
border-radius: 7px;
background: #FFF;
color: #1B1C1C;
font-size: 12px;
}
.wolai-page-ai-composer-bar {
display: flex;
min-height: 36px;
align-items: center;
gap: 6px;
padding: 0 6px 6px;
}
.wolai-page-ai-composer-spacer {
flex: 1 1 auto;
}
.wolai-page-ai-tool-button {
width: 28px;
height: 28px;
border: 1px solid rgba(27, 28, 28, 0.1);
border-radius: 6px;
background: #FFF;
color: #5A5A5A;
font-size: 14px;
cursor: pointer;
}
.wolai-page-ai-tool-button:hover {
border-color: rgba(27, 28, 28, 0.2);
color: #1B1C1C;
}
.wolai-page-ai-input {
width: 100%;
min-height: 76px;
padding: 10px 10px 4px;
border: 0;
background: transparent;
color: #1B1C1C;
font-size: 13px;
line-height: 20px;
resize: none;
}
.wolai-page-ai-input:focus {
outline: none;
}
.wolai-page-ai-stop {
min-width: 42px;
height: 28px;
padding: 0 10px;
border: 0;
border-radius: 6px;
background: #F3F3F2;
color: #5A5A5A;
font-size: 12px;
cursor: pointer;
}
.wolai-page-ai-stop:disabled {
color: #B5B1AA;
cursor: not-allowed;
}
.wolai-page-ai-send {
min-width: 52px;
height: 28px;
padding: 0 12px;
border: 0;
border-radius: 6px;
background: #1B1C1C;
color: #FFF;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
@media (max-width: 768px) {
.mnote-sidebar,
.wolai-sidebar {
width: 220px;
}
.mnote-sidebar-resizer {
display: none;
}
.wolai-topbar {
padding: 0 12px;
}
.wolai-page-settings-popover {
right: 12px;
}
.wolai-page-history-panel,
.wolai-page-ai-panel {
width: min(100vw - 24px, 420px);
}
.wolai-page-ai-resize-handle {
display: none;
}
.wolai-page-ai-settings-grid,
.wolai-page-ai-settings-head {
grid-template-columns: minmax(0, 1fr);
}
.wolai-public-pill,
.wolai-breadcrumb-root,
.wolai-breadcrumb-separator {
display: none;
}
.document-workspace[data-has-secondary-pane="true"] {
grid-template-columns: minmax(0, 1fr);
}
.document-workspace[data-has-secondary-pane="true"] .document-pane-resizer {
display: none;
}
.document-pane[data-pane-role="secondary"] .document-shell {
padding-top: 32px;
padding-left: 0;
padding-right: 0;
}
.document-shell {
width: 100%;
padding: 48px 28px 120px;
}
.document-shell-header h1 {
font-size: 32px;
line-height: 40px;
}
#mnote-leptos-tiptap-island-editor-root .block-handle-shell {
left: -32px !important;
}
}
@media (max-width: 480px) {
.mnote-shell {
flex-direction: column;
}
.mnote-sidebar,
.wolai-sidebar {
width: 100%;
max-height: 42vh;
border-bottom: 1px solid rgba(27, 28, 28, 0.08);
box-shadow: none;
}
.mnote-sidebar-resizer {
display: none;
}
.document-shell {
padding: 36px 20px 112px;
}
.document-shell-header h1 {
font-size: 28px;
}
.wolai-topbar-actions {
gap: 2px;
}
.wolai-page-settings-panel,
.wolai-page-share-card,
.wolai-page-ai-panel {
width: calc(100vw - 24px);
}
.wolai-page-ai-resize-handle {
display: none;
}
}