/* Default variant - use CSS variables for brand colors */
button[class*="default"][data-v-dc80415a],
a[class*="default"][data-v-dc80415a] {
background: linear-gradient(to right, rgb(var(--color-brand-primary-rgb)), rgb(var(--color-brand-secondary-rgb)));
}
/* Focus ring using brand color */
[data-v-dc80415a]:focus-visible {
outline: 2px solid rgb(var(--color-brand-primary-rgb));
outline-offset: 2px;
}
/* Notion 风格按钮 */
.action-button[data-v-2cc940b7] {
position: relative;
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0;
}
.action-button[data-v-2cc940b7]:hover {
background: var(--navbar-button-hover);
color: var(--color-text-primary);
}
.action-button[data-v-2cc940b7]:active {
background: var(--navbar-button-active);
}
.action-button.active[data-v-2cc940b7] {
background: var(--navbar-button-active);
color: var(--color-text-primary);
}
/* Theme Menu */
.theme-menu[data-v-2cc940b7] {
position: absolute;
right: 0;
margin-top: 4px;
width: 160px;
background: var(--color-bg-elevated);
border-radius: 8px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border-subtle);
padding: 6px;
z-index: 50;
}
.theme-menu-item[data-v-2cc940b7] {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 7px 10px;
border-radius: 4px;
background: transparent;
border: none;
color: var(--color-text-primary);
font-size: 14px;
cursor: pointer;
transition: background-color 0.15s ease;
text-align: left;
}
.theme-menu-item[data-v-2cc940b7]:hover {
background: var(--navbar-button-hover);
}
.theme-menu-item.active[data-v-2cc940b7] {
background: var(--navbar-button-active);
}
.theme-menu-item svg[data-v-2cc940b7] {
color: var(--color-text-secondary);
}
/* Utility classes */
.flex[data-v-2cc940b7] {
display: flex;
}
.items-center[data-v-2cc940b7] {
align-items: center;
}
.gap-2[data-v-2cc940b7] {
gap: 8px;
}
.h-4[data-v-2cc940b7] {
height: 16px;
}
.w-4[data-v-2cc940b7] {
width: 16px;
}
.storage-migration-panel[data-v-794087e4] {
max-width: 500px;
}
.doxmind-logo[data-v-dc6fcd16] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.doxmind-logo.with-text[data-v-dc6fcd16] {
gap: 0.625rem;
}
/* Logo 图标 - SVG 样式 */
.logo-icon[data-v-dc6fcd16] {
display: block;
transition: transform 0.3s ease, filter 0.3s ease;
}
.logo-icon[data-v-dc6fcd16]:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.4));
}
/* AI 指示点动画 */
.ai-dot-indicator[data-v-dc6fcd16] {
animation: pulse-dc6fcd16 2s infinite;
filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.6));
}
@keyframes pulse-dc6fcd16 {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
}
}
/* Logo 文字 */
.logo-text[data-v-dc6fcd16] {
display: flex;
align-items: baseline;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-weight: 300;
letter-spacing: -0.5px;
}
.logo-text-vertical[data-v-dc6fcd16] {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
}
/* 文字尺寸 */
.logo-xs .logo-text[data-v-dc6fcd16] {
font-size: 1rem;
}
.logo-sm .logo-text[data-v-dc6fcd16] {
font-size: 1.25rem;
}
.logo-md .logo-text[data-v-dc6fcd16] {
font-size: 1.5rem;
}
.logo-lg .logo-text[data-v-dc6fcd16] {
font-size: 2.25rem;
}
.logo-xl .logo-text[data-v-dc6fcd16] {
font-size: 3rem;
}
/* 文字颜色 */
.text-do[data-v-dc6fcd16] {
color: var(--color-text-primary);
opacity: 0.9;
}
.text-x[data-v-dc6fcd16] {
color: var(--color-brand-primary, #1e3a8a);
font-weight: 400;
margin: 0 -0.1em;
}
.text-mind[data-v-dc6fcd16] {
background: linear-gradient(90deg, var(--color-brand-secondary, #1d4ed8), #60a5fa);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Tagline */
.logo-tagline[data-v-dc6fcd16] {
color: var(--color-text-tertiary);
font-size: 0.75em;
font-weight: 400;
margin-top: 0.25rem;
letter-spacing: 0;
}
/* 响应式调整 */
@media (max-width: 640px) {
.doxmind-logo.with-text[data-v-dc6fcd16] {
gap: 0.75rem;
}
.logo-lg .logo-text[data-v-dc6fcd16],
.logo-xl .logo-text[data-v-dc6fcd16] {
font-size: 1.75rem;
}
}
.user-profile-dropdown[data-v-1b3c017c] {
position: relative;
}
.user-avatar-button[data-v-1b3c017c] {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
overflow: hidden;
background: transparent;
}
.user-avatar-button[data-v-1b3c017c]:hover {
border-color: rgba(102, 126, 234, 0.5);
transform: scale(1.05);
}
.avatar-image[data-v-1b3c017c] {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}
.avatar-placeholder[data-v-1b3c017c] {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 0.875rem;
font-weight: 600;
}
.dropdown-menu[data-v-1b3c017c] {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
min-width: 280px;
z-index: 50;
border-width: 1px;
border-style: solid;
}
.user-info[data-v-1b3c017c] {
padding: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.user-avatar-large[data-v-1b3c017c] {
flex-shrink: 0;
}
.avatar-image-large[data-v-1b3c017c] {
width: 48px;
height: 48px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.avatar-placeholder-large[data-v-1b3c017c] {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 1.25rem;
font-weight: 600;
}
.user-details[data-v-1b3c017c] {
flex: 1;
min-width: 0;
}
.user-name[data-v-1b3c017c] {
font-size: 0.875rem;
font-weight: 600;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-email[data-v-1b3c017c] {
font-size: 0.75rem;
margin: 0.25rem 0 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown-divider[data-v-1b3c017c] {
height: 1px;
margin: 0;
}
.dropdown-items[data-v-1b3c017c] {
padding: 0.5rem;
}
.dropdown-item[data-v-1b3c017c] {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: transparent;
border: none;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.875rem;
text-align: left;
}
.dropdown-item[data-v-1b3c017c]:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.item-icon[data-v-1b3c017c] {
font-size: 1.25rem;
}
/* Transition */
.dropdown-enter-active[data-v-1b3c017c],
.dropdown-leave-active[data-v-1b3c017c] {
transition: all 0.2s ease;
}
.dropdown-enter-from[data-v-1b3c017c],
.dropdown-leave-to[data-v-1b3c017c] {
opacity: 0;
transform: translateY(-0.5rem);
}
/* No additional styles needed */
/* Notion Style Header */
.welcome-header[data-v-c22cb87c] {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 45px;
background: var(--navbar-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--navbar-separator);
z-index: 1000;
}
.nav-content[data-v-c22cb87c] {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
gap: 16px;
}
.nav-left[data-v-c22cb87c] {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 0;
}
.nav-center[data-v-c22cb87c] {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
max-width: 600px;
margin: 0 auto;
}
.nav-right[data-v-c22cb87c] {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Separator between actions */
.nav-separator[data-v-c22cb87c] {
width: 1px;
height: 20px;
background: var(--navbar-separator);
margin: 0 4px;
}
/* Search Container */
.search-container[data-v-c22cb87c] {
position: relative;
width: 100%;
max-width: 500px;
}
.search-icon[data-v-c22cb87c] {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-tertiary);
pointer-events: none;
}
.search-input[data-v-c22cb87c] {
width: 100%;
height: 32px;
padding: 0 12px 0 36px;
background: var(--color-bg-tertiary);
border: 1px solid transparent;
border-radius: 6px;
font-size: 14px;
color: var(--color-text-primary);
outline: none;
transition: all 0.15s ease;
}
.search-input[data-v-c22cb87c]::-moz-placeholder {
color: var(--color-text-tertiary);
}
.search-input[data-v-c22cb87c]::placeholder {
color: var(--color-text-tertiary);
}
.search-input[data-v-c22cb87c]:focus {
background: var(--color-bg-elevated);
border-color: var(--color-border-primary);
box-shadow: 0 0 0 2px var(--color-brand-primary-05);
}
/* Notion Style Action Button */
.nav-action-button[data-v-c22cb87c] {
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
flex-shrink: 0;
}
.nav-action-button[data-v-c22cb87c]:hover {
background: var(--navbar-button-hover);
color: var(--color-text-primary);
}
.nav-action-button[data-v-c22cb87c]:active {
background: var(--navbar-button-active);
}
/* Window Controls - Notion Style */
.window-controls[data-v-c22cb87c] {
display: flex;
align-items: center;
gap: 8px;
margin-left: 8px;
padding-left: 8px;
border-left: 1px solid var(--navbar-separator);
}
.window-control-btn[data-v-c22cb87c] {
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
}
.window-control-btn[data-v-c22cb87c]:hover {
background: var(--navbar-button-hover);
color: var(--color-text-primary);
}
.window-close[data-v-c22cb87c]:hover {
background: #ff453a;
color: white;
}
/* Hide scrollbar for template gallery */
.no-scrollbar[data-v-c22cb87c]::-webkit-scrollbar {
display: none;
}
.no-scrollbar[data-v-c22cb87c] {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Smooth hover transitions */
[data-v-c22cb87c] {
transition-property: background-color, border-color, color, opacity, transform, box-shadow;
transition-duration: 150ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Document card aspect ratio */
.aspect-\[8\.5\/11\][data-v-c22cb87c] {
aspect-ratio: 8.5/11;
}
/* Line clamp utilities */
.line-clamp-4[data-v-c22cb87c] {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Spin animation for loading states */
@keyframes spin-c22cb87c {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin[data-v-c22cb87c] {
animation: spin-c22cb87c 1s linear infinite;
}
/* Markdown preview styles */
.markdown-preview[data-v-c22cb87c] {
word-wrap: break-word;
overflow-wrap: break-word;
}
.markdown-preview[data-v-c22cb87c] * {
color: inherit !important;
}
.markdown-preview h1[data-v-c22cb87c],
.markdown-preview h2[data-v-c22cb87c],
.markdown-preview h3[data-v-c22cb87c],
.markdown-preview h4[data-v-c22cb87c],
.markdown-preview h5[data-v-c22cb87c],
.markdown-preview h6[data-v-c22cb87c] {
margin-top: 0;
margin-bottom: 0.3em;
font-weight: 700;
line-height: 1.3;
}
.dark .markdown-preview h1[data-v-c22cb87c],
.dark .markdown-preview h2[data-v-c22cb87c],
.dark .markdown-preview h3[data-v-c22cb87c],
.dark .markdown-preview h4[data-v-c22cb87c],
.dark .markdown-preview h5[data-v-c22cb87c],
.dark .markdown-preview h6[data-v-c22cb87c] {
font-weight: 700;
}
.markdown-preview h1[data-v-c22cb87c] {
font-size: 1.5em;
}
.markdown-preview h2[data-v-c22cb87c] {
font-size: 1.35em;
}
.markdown-preview h3[data-v-c22cb87c] {
font-size: 1.2em;
}
.markdown-preview h4[data-v-c22cb87c] {
font-size: 1.1em;
}
.markdown-preview h5[data-v-c22cb87c],
.markdown-preview h6[data-v-c22cb87c] {
font-size: 1em;
font-weight: 600;
}
.markdown-preview p[data-v-c22cb87c] {
margin: 0.25em 0;
}
.markdown-preview p[data-v-c22cb87c]:first-child {
margin-top: 0;
}
.markdown-preview p[data-v-c22cb87c]:last-child {
margin-bottom: 0;
}
.markdown-preview ul[data-v-c22cb87c],
.markdown-preview ol[data-v-c22cb87c] {
margin: 0.25em 0;
padding-left: 1.2em;
}
.markdown-preview li[data-v-c22cb87c] {
margin: 0.15em 0;
}
.markdown-preview code[data-v-c22cb87c] {
background-color: rgba(0, 0, 0, 0.05);
padding: 0.125em 0.25em;
border-radius: 3px;
font-size: 0.9em;
font-family: monospace;
}
.dark .markdown-preview code[data-v-c22cb87c] {
background-color: rgba(255, 255, 255, 0.1);
}
.markdown-preview pre[data-v-c22cb87c] {
background-color: rgba(0, 0, 0, 0.05);
padding: 0.4em;
border-radius: 4px;
overflow-x: auto;
margin: 0.25em 0;
}
.dark .markdown-preview pre[data-v-c22cb87c] {
background-color: rgba(255, 255, 255, 0.05);
}
.markdown-preview pre code[data-v-c22cb87c] {
background-color: transparent;
padding: 0;
}
.markdown-preview blockquote[data-v-c22cb87c] {
border-left: 3px solid #d1d5db;
padding-left: 0.8em;
margin: 0.25em 0;
color: #6b7280;
}
.dark .markdown-preview blockquote[data-v-c22cb87c] {
border-left-color: #4b5563;
color: #9ca3af;
}
.markdown-preview strong[data-v-c22cb87c] {
font-weight: 600;
}
.markdown-preview em[data-v-c22cb87c] {
font-style: italic;
}
.markdown-preview a[data-v-c22cb87c] {
color: var(--color-brand-primary);
text-decoration: none;
}
.dark .markdown-preview a[data-v-c22cb87c] {
color: #818cf8;
}
.markdown-preview a[data-v-c22cb87c]:hover {
text-decoration: underline;
}
.material-icons[data-v-5095f4bf] {
font-size: 24px;
}
.material-icons-small[data-v-5095f4bf] {
font-size: 18px;
}
/* Fix for sidebar overflow behavior */
[ref="sidebarWrapperRef"][data-v-5095f4bf] {
transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: width;
}
/* Ensure content is properly hidden when collapsed */
.opacity-0.invisible.pointer-events-none[data-v-5095f4bf] {
display: block;
pointer-events: none;
}
/* Prevent layout shifts during animations */
.overflow-hidden[data-v-5095f4bf] {
overflow: hidden;
}
/* Performance optimization for frequently animated elements */
.duration-300[data-v-5095f4bf] {
transition-duration: 300ms;
}
.ease-out[data-v-5095f4bf] {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Table of Contents scrollable container with hidden scrollbar */
.toc-scrollable[data-v-5095f4bf] {
overflow-y: auto;
overflow-x: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.toc-scrollable[data-v-5095f4bf]::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
/* Loading spinner */
.loading-spinner[data-v-5095f4bf] {
width: 20px;
height: 20px;
margin: 0 auto;
border: 2px solid var(--color-border-subtle);
border-top-color: var(--color-brand-primary);
border-radius: 50%;
animation: spin-5095f4bf 0.8s linear infinite;
}
@keyframes spin-5095f4bf {
to {
transform: rotate(360deg);
}
}
.chat-header-container[data-v-6e547099] {
position: relative;
overflow: hidden;
z-index: 20;
/* 与 ChatPanel 使用相同的背景色 */
background: var(--color-bg-primary) !important;
/* 移除所有边框确保无缝融合 */
border: none !important;
border-bottom: none !important;
}
/* 移除顶部装饰线条以实现与 ChatPanel 完全融合 */
.chat-header-container[data-v-6e547099]::before {
display: none;
}
.header-content[data-v-6e547099] {
position: relative;
z-index: 2;
}
/* Session title - Enhanced styling */
.session-title-wrapper[data-v-6e547099] {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.session-title-wrapper[data-v-6e547099]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.05) 0%,
rgba(6, 182, 212, 0.05) 50%,
rgba(59, 130, 246, 0.05) 100%
);
opacity: 0;
transition: opacity 0.3s ease;
}
.session-title-wrapper[data-v-6e547099]:hover::before {
opacity: 1;
}
.session-title-wrapper[data-v-6e547099]:hover {
border-color: rgba(0, 113, 227, 0.3);
box-shadow: 0 4px 12px rgba(0, 113, 227, 0.1);
transform: translateY(-1px);
}
.session-title[data-v-6e547099] {
color: var(--text-primary);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.session-status[data-v-6e547099] {
position: relative;
}
.session-status[data-v-6e547099]::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: radial-gradient(circle, var(--color-success-bg) 0%, transparent 70%);
}
/* Pulse animation for active status */
@keyframes pulse-glow-6e547099 {
0%, 100% {
box-shadow: 0 0 4px var(--color-success);
}
50% {
box-shadow: 0 0 8px var(--color-success), 0 0 12px var(--color-success-bg);
}
}
/* Action buttons - clean design system styling */
.action-btn[data-v-6e547099] {
position: relative;
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
background: transparent;
border: 1px solid var(--border-primary);
color: var(--text-secondary);
}
.action-btn .material-icons[data-v-6e547099] {
font-size: 18px;
}
/* Compact action buttons for tighter layout */
.action-btn-compact[data-v-6e547099] {
position: relative;
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
background: transparent;
border: 1px solid var(--border-primary);
color: var(--text-secondary);
}
.action-btn-compact .material-icons[data-v-6e547099] {
font-size: 16px;
}
.action-btn[data-v-6e547099]:hover,
.action-btn-compact[data-v-6e547099]:hover {
background: var(--bg-hover);
border-color: var(--brand-primary);
color: var(--brand-primary);
}
.action-btn[data-v-6e547099]:active,
.action-btn-compact[data-v-6e547099]:active {
background: var(--bg-active);
}
.action-btn.active[data-v-6e547099],
.action-btn-compact.active[data-v-6e547099] {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: var(--text-primary);
}
.action-btn[data-v-6e547099]:disabled,
.action-btn-compact[data-v-6e547099]:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.action-btn-compact.loading[data-v-6e547099] {
background: var(--bg-hover);
border-color: var(--brand-primary);
color: var(--brand-primary);
}
@keyframes spin-6e547099 {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
.animate-spin[data-v-6e547099] {
animation: spin-6e547099 1s linear infinite;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.header-content[data-v-6e547099] {
padding: 4px 8px;
}
.session-title-wrapper[data-v-6e547099] {
padding: 4px 8px;
gap: 6px;
}
.session-title[data-v-6e547099] {
font-size: 0.75rem;
}
.session-status div[data-v-6e547099] {
width: 4px;
height: 4px;
}
.action-btn-compact[data-v-6e547099] {
width: 24px;
height: 24px;
}
.action-btn-compact .material-icons[data-v-6e547099] {
font-size: 14px;
}
}
.user-message-wrapper[data-v-1e57d279] {
position: relative;
}
.user-message[data-v-1e57d279] {
/* 微妙的渐变背景增加质感 */
background: linear-gradient(135deg,
rgba(71, 85, 105, 0.85) 0%,
rgba(63, 63, 70, 0.9) 50%,
rgba(52, 52, 58, 0.95) 100%
);
/* 统一的边框设计 */
border: 1px solid rgba(100, 116, 139, 0.4);
/* 层次感阴影 */
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15),
0 1px 3px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
/* 微妙的纹理效果 */
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
background-size: 20px 20px;
border-radius: 8px;
position: relative;
transition: all 0.2s ease;
}
/* 移除顶部高光装饰 */
/* 精致的悬浮效果 */
.user-message[data-v-1e57d279]:hover {
border-color: rgba(129, 140, 248, 0.5);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15),
0 1px 3px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(129, 140, 248, 0.3),
0 0 0 2px rgba(100, 116, 139, 0.2),
0 0 8px rgba(129, 140, 248, 0.15);
}
/* 上下文头部 - 精简设计 */
.context-header[data-v-1e57d279] {
position: relative;
padding-bottom: 4px;
/* 进一步减少底部间距 */
}
/* 消息内容区域 - 主要内容区 */
.message-content-wrapper[data-v-1e57d279] {
/* 给内容更多的视觉权重 */
margin: 6px 0;
position: relative;
/* 减少上下边距，为内容让出更多空间 */
}
.message-content[data-v-1e57d279] {
line-height: 1.5;
color: var(--color-text-primary);
text-shadow: 0 1px 2px var(--shadow-sm);
font-size: 0.8rem;
/* 调整为比AI回复更小的字体 */
}
/* 上下文徽章容器 - 紧凑布局 */
.context-badges-container[data-v-1e57d279] {
margin-top: 3px;
/* 减少上边距 */
}
.context-badge[data-v-1e57d279] {
padding: 2px 6px;
border-radius: 4px;
background: linear-gradient(135deg,
rgba(var(--context-color), 0.08) 0%,
rgba(var(--context-color), 0.06) 100%
);
border: 1px solid rgba(var(--context-color), 0.2);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: all 0.15s ease;
font-size: 0.65rem;
/* 相应调整徽章字体大小 */
}
.context-badge[data-v-1e57d279]:hover {
background: linear-gradient(135deg,
rgba(var(--context-color), 0.12) 0%,
rgba(var(--context-color), 0.08) 100%
);
border-color: rgba(var(--context-color), 0.3);
box-shadow:
0 2px 3px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* 不同类型的上下文颜色 */
.context-badge.text-brand-secondary[data-v-1e57d279] {
--context-color: 99, 102, 241;
}
.context-badge.text-green-400[data-v-1e57d279] {
--context-color: 34, 197, 94;
}
.context-badge.text-purple-400[data-v-1e57d279] {
--context-color: 168, 85, 247;
}
.context-badge.text-orange-400[data-v-1e57d279] {
--context-color: 251, 146, 60;
}
/* 上下文详情区域 */
.context-details[data-v-1e57d279] {
background: linear-gradient(135deg,
rgba(30, 41, 59, 0.7) 0%,
rgba(39, 39, 42, 0.8) 100%
);
border-radius: 6px;
padding: 8px;
border: 1px solid rgba(71, 85, 105, 0.4);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
/* 移除上边距，由模板控制 */
}
.context-preview[data-v-1e57d279] {
background: linear-gradient(135deg,
rgba(15, 23, 42, 0.9) 0%,
rgba(24, 24, 27, 0.95) 100%
);
border: 1px solid rgba(71, 85, 105, 0.3);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: all 0.2s ease;
}
.context-preview[data-v-1e57d279]:hover {
background: linear-gradient(135deg,
rgba(30, 41, 59, 0.95) 0%,
rgba(39, 39, 42, 1) 100%
);
border-color: rgba(100, 116, 139, 0.4);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* 文件引用区域样式 - 紧凑优化 */
.file-reference-section[data-v-1e57d279] {
background: linear-gradient(135deg,
rgba(30, 41, 59, 0.25) 0%,
rgba(39, 39, 42, 0.3) 100%
);
border-radius: 5px;
border: 1px solid rgba(71, 85, 105, 0.25);
padding: 4px 6px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
/* 进一步减少内边距 */
}
.main-file-display[data-v-1e57d279] {
position: relative;
min-height: 14px;
/* 减少最小高度 */
}
.file-display-text[data-v-1e57d279] {
max-width: 240px;
/* 设置合理的最大宽度 */
}
.file-expand-btn[data-v-1e57d279] {
padding: 1px 2px;
border-radius: 3px;
background: transparent;
border: none;
cursor: pointer;
transition: all 0.15s ease;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
/* 精确控制按钮尺寸 */
}
.file-expand-btn[data-v-1e57d279]:hover {
background: rgba(71, 85, 105, 0.3);
transform: scale(1.05);
}
.file-list[data-v-1e57d279] {
padding-left: 4px;
border-left: 1px solid rgba(71, 85, 105, 0.25);
margin-left: 4px;
/* 进一步减少缩进和间距 */
}
.file-item[data-v-1e57d279] {
padding: 1px 3px;
border-radius: 3px;
background: linear-gradient(135deg,
rgba(15, 23, 42, 0.5) 0%,
rgba(24, 24, 27, 0.6) 100%
);
border: 1px solid rgba(71, 85, 105, 0.15);
transition: all 0.15s ease;
min-height: 16px;
/* 减少最小高度和内边距 */
}
.file-item[data-v-1e57d279]:hover {
background: linear-gradient(135deg,
rgba(30, 41, 59, 0.6) 0%,
rgba(39, 39, 42, 0.7) 100%
);
border-color: rgba(100, 116, 139, 0.25);
}
.file-name[data-v-1e57d279] {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
/* 动态调整文件名最大宽度 */
}
.current-doc-badge[data-v-1e57d279] {
font-size: 0.55rem;
font-weight: 500;
border: 1px solid rgba(59, 130, 246, 0.25);
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(147, 197, 253, 0.08);
white-space: nowrap;
flex-shrink: 0;
padding: 1px 4px;
/* 调整current徽章字体大小 */
}
/* 响应式调整 - Apple风格 */
@media (max-width: 768px) {
.user-message[data-v-1e57d279] {
margin: 0 2px;
border-radius: 6px;
}
.file-display-text[data-v-1e57d279] {
max-width: 160px;
}
.file-name[data-v-1e57d279] {
max-width: 120px;
}
.message-content[data-v-1e57d279] {
font-size: 0.75rem;
/* 移动端略微增大消息内容字体以保持可读性 */
}
}
/* 微交互和过渡效果优化 */
@media (prefers-reduced-motion: reduce) {
[data-v-1e57d279] {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.diff-viewer[data-v-212acec3] {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
overflow: hidden;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 12px;
line-height: 1.4;
}
.diff-header[data-v-212acec3] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: var(--color-bg-tertiary);
border-bottom: 1px solid var(--color-border-subtle);
}
.file-info[data-v-212acec3] {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-text-primary);
}
.file-info .material-icons[data-v-212acec3] {
font-size: 16px;
color: var(--color-brand-primary);
}
.file-path[data-v-212acec3] {
font-weight: 500;
font-size: 11px;
}
.diff-stats[data-v-212acec3] {
display: flex;
gap: 8px;
font-size: 11px;
font-weight: 500;
}
.additions[data-v-212acec3] {
color: #16a34a; /* Dark green */
font-weight: 600;
}
.deletions[data-v-212acec3] {
color: #dc2626; /* Dark red */
font-weight: 600;
}
.diff-content[data-v-212acec3] {
max-height: 300px;
overflow-y: auto;
}
.diff-lines[data-v-212acec3] {
display: flex;
flex-direction: column;
}
.diff-line[data-v-212acec3] {
display: flex;
align-items: flex-start;
min-height: 18px;
border-left: 3px solid transparent;
transition: all 0.1s ease;
}
.diff-line[data-v-212acec3]:hover {
background: var(--color-bg-hover);
}
.diff-line.added[data-v-212acec3] {
background: #e6ffec; /* Light green background */
border-left-color: #22c55e; /* Green border */
}
.diff-line.removed[data-v-212acec3] {
background: #ffebe9; /* Light red background */
border-left-color: #ef4444; /* Red border */
}
.diff-line.context[data-v-212acec3] {
background: transparent;
}
.diff-line.hunk-header[data-v-212acec3] {
background: var(--color-status-info-bg);
border-left-color: var(--color-status-info);
color: var(--color-brand-primary);
font-weight: 500;
}
.line-numbers[data-v-212acec3] {
display: flex;
min-width: 80px;
background: var(--color-bg-tertiary);
border-right: 1px solid var(--color-border-subtle);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.old-line-num[data-v-212acec3],
.new-line-num[data-v-212acec3] {
width: 40px;
padding: 1px 6px;
text-align: right;
color: var(--color-text-tertiary);
font-size: 10px;
}
.new-line-num[data-v-212acec3] {
border-left: 1px solid var(--color-border-subtle);
}
.added .new-line-num[data-v-212acec3] {
background: #d1f4dd; /* Slightly darker green for line numbers */
color: #16a34a; /* Dark green text */
font-weight: 600;
}
.removed .old-line-num[data-v-212acec3] {
background: #fecdd3; /* Slightly darker red for line numbers */
color: #dc2626; /* Dark red text */
font-weight: 600;
}
.line-content[data-v-212acec3] {
flex: 1;
padding: 1px 8px;
white-space: pre-wrap;
word-break: break-word;
display: flex;
align-items: flex-start;
}
.line-prefix[data-v-212acec3] {
width: 12px;
flex-shrink: 0;
font-weight: bold;
margin-right: 4px;
}
.added .line-prefix[data-v-212acec3] {
color: #16a34a; /* Dark green for + sign */
font-weight: 700;
}
.removed .line-prefix[data-v-212acec3] {
color: #dc2626; /* Dark red for - sign */
font-weight: 700;
}
.context .line-prefix[data-v-212acec3] {
color: var(--color-text-tertiary);
}
.hunk-header .line-prefix[data-v-212acec3] {
color: var(--color-brand-primary);
}
.line-text[data-v-212acec3] {
flex: 1;
color: var(--color-text-primary);
white-space: pre-wrap;
}
.added .line-text[data-v-212acec3] {
color: var(--color-text-primary);
}
.removed .line-text[data-v-212acec3] {
color: var(--color-text-primary);
}
.hunk-header .line-text[data-v-212acec3] {
color: var(--color-brand-primary);
font-style: italic;
}
/* Scrollbar styling */
.diff-content[data-v-212acec3]::-webkit-scrollbar {
width: 6px;
}
.diff-content[data-v-212acec3]::-webkit-scrollbar-track {
background: var(--color-bg-tertiary);
}
.diff-content[data-v-212acec3]::-webkit-scrollbar-thumb {
background: var(--color-border-strong);
border-radius: 3px;
}
.diff-content[data-v-212acec3]::-webkit-scrollbar-thumb:hover {
background: var(--color-text-secondary);
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.diff-line.added[data-v-212acec3] {
background: #0d2818; /* Dark green background */
border-left-color: #22c55e;
}
.diff-line.removed[data-v-212acec3] {
background: #2d1517; /* Dark red background */
border-left-color: #ef4444;
}
.added .new-line-num[data-v-212acec3] {
background: #14532d; /* Darker green for line numbers */
color: #4ade80; /* Bright green text */
}
.removed .old-line-num[data-v-212acec3] {
background: #450a0a; /* Darker red for line numbers */
color: #f87171; /* Bright red text */
}
.added .line-prefix[data-v-212acec3] {
color: #4ade80; /* Bright green for + sign */
}
.removed .line-prefix[data-v-212acec3] {
color: #f87171; /* Bright red for - sign */
}
.additions[data-v-212acec3] {
color: #4ade80; /* Bright green */
}
.deletions[data-v-212acec3] {
color: #f87171; /* Bright red */
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.diff-viewer[data-v-212acec3] {
font-size: 11px;
}
.line-numbers[data-v-212acec3] {
min-width: 60px;
}
.old-line-num[data-v-212acec3],
.new-line-num[data-v-212acec3] {
width: 30px;
padding: 1px 4px;
font-size: 9px;
}
.line-content[data-v-212acec3] {
padding: 1px 6px;
}
.diff-content[data-v-212acec3] {
max-height: 200px;
}
}
/* VS Code style file list */
.file-changes-list[data-v-1cd30e77] {
margin: 8px 0;
font-size: 13px;
display: flex;
flex-direction: column;
gap: 0;
}
.file-item[data-v-1cd30e77] {
border: 1px solid var(--color-border-subtle);
border-bottom: none;
background: var(--color-bg-secondary);
overflow: hidden;
transition: background 0.15s ease;
}
.file-item[data-v-1cd30e77]:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.file-item[data-v-1cd30e77]:last-child {
border-bottom: 1px solid var(--color-border-subtle);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.file-item[data-v-1cd30e77]:hover {
background: var(--color-bg-hover);
}
/* File item header - VS Code style */
.file-item-header[data-v-1cd30e77] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 12px;
gap: 12px;
cursor: default;
}
.file-info[data-v-1cd30e77] {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.file-icon[data-v-1cd30e77] {
font-size: 16px;
color: var(--color-text-tertiary);
flex-shrink: 0;
}
.file-path[data-v-1cd30e77] {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-stats[data-v-1cd30e77] {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* VS Code style stats */
.additions[data-v-1cd30e77] {
color: #22c55e;
font-weight: 600;
font-size: 12px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
}
.deletions[data-v-1cd30e77] {
color: #ef4444;
font-weight: 600;
font-size: 12px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
}
/* Expand button */
.expand-btn[data-v-1cd30e77] {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
background: transparent;
color: var(--color-text-tertiary);
cursor: pointer;
border-radius: 3px;
transition: all 0.15s ease;
}
.expand-btn[data-v-1cd30e77]:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.expand-btn .material-icons[data-v-1cd30e77] {
font-size: 18px;
}
/* Diff viewer */
.file-diff[data-v-1cd30e77] {
padding: 0;
border-top: 1px solid var(--color-border-subtle);
background: var(--color-bg-primary);
animation: slideDown-1cd30e77 0.2s ease-out;
}
@keyframes slideDown-1cd30e77 {
from {
opacity: 0;
max-height: 0;
}
to {
opacity: 1;
max-height: 600px;
}
}
/* Responsive */
@media (max-width: 768px) {
.file-path[data-v-1cd30e77] {
font-size: 12px;
}
.additions[data-v-1cd30e77],
.deletions[data-v-1cd30e77] {
font-size: 11px;
}
}
/* File changes container */
.file-changes-with-summaries[data-v-d8c43829] {
margin: 8px 0;
font-size: 13px;
}
.changes-header[data-v-d8c43829] {
display: flex;
align-items: center;
margin-bottom: 8px;
}
/* File list - VS Code style */
.file-changes-list[data-v-d8c43829] {
display: flex;
flex-direction: column;
gap: 0;
}
.file-item[data-v-d8c43829] {
border: 1px solid var(--color-border-subtle);
border-bottom: none;
background: var(--color-bg-secondary);
overflow: hidden;
transition: background 0.15s ease;
}
.file-item[data-v-d8c43829]:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.file-item[data-v-d8c43829]:last-child {
border-bottom: 1px solid var(--color-border-subtle);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.file-item[data-v-d8c43829]:hover {
background: var(--color-bg-hover);
}
/* File item header */
.file-item-header[data-v-d8c43829] {
padding: 10px 12px 8px;
}
.file-main-info[data-v-d8c43829] {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.file-header-row[data-v-d8c43829] {
display: flex;
justify-content: space-between;
align-items: center;
}
.file-info[data-v-d8c43829] {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.file-icon[data-v-d8c43829] {
font-size: 16px;
color: var(--color-text-tertiary);
flex-shrink: 0;
}
.file-path[data-v-d8c43829] {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
font-size: 13px;
color: var(--color-text-primary);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Edit type badge */
.edit-type-badge[data-v-d8c43829] {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
flex-shrink: 0;
}
.badge-blue[data-v-d8c43829] {
background-color: rgba(59, 130, 246, 0.1);
color: rgb(59, 130, 246);
}
.badge-purple[data-v-d8c43829] {
background-color: rgba(168, 85, 247, 0.1);
color: rgb(168, 85, 247);
}
.badge-green[data-v-d8c43829] {
background-color: rgba(34, 197, 94, 0.1);
color: rgb(34, 197, 94);
}
.badge-orange[data-v-d8c43829] {
background-color: rgba(249, 115, 22, 0.1);
color: rgb(249, 115, 22);
}
.badge-gray[data-v-d8c43829] {
background-color: rgba(156, 163, 175, 0.1);
color: rgb(156, 163, 175);
}
/* AI Summary section */
.summary-section[data-v-d8c43829] {
display: flex;
flex-direction: column;
gap: 4px;
}
.summary-title[data-v-d8c43829] {
font-size: 13px;
font-weight: 500;
color: var(--color-text-primary);
line-height: 1.4;
}
.summary-details[data-v-d8c43829] {
font-size: 12px;
color: var(--color-text-secondary);
line-height: 1.5;
padding: 6px 10px;
background: var(--color-bg-tertiary);
border-left: 2px solid var(--color-brand-primary);
border-radius: 4px;
margin-top: 2px;
}
.summary-toggle[data-v-d8c43829] {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 12px;
color: var(--color-text-tertiary);
background: none;
border: none;
padding: 2px 0;
cursor: pointer;
transition: color 0.15s ease;
width: -moz-fit-content;
width: fit-content;
}
.summary-toggle[data-v-d8c43829]:hover {
color: var(--color-text-primary);
}
.summary-toggle .material-icons[data-v-d8c43829] {
font-size: 14px;
}
/* Action buttons */
.file-actions[data-v-d8c43829] {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.action-btn[data-v-d8c43829] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
}
.action-btn .material-icons[data-v-d8c43829] {
font-size: 14px;
}
.view-history-btn[data-v-d8c43829] {
background: var(--color-bg-tertiary);
color: var(--color-text-primary);
}
.view-history-btn[data-v-d8c43829]:hover {
background: var(--color-bg-quaternary);
}
.restore-btn[data-v-d8c43829] {
background: var(--color-brand-primary);
color: white;
}
.restore-btn[data-v-d8c43829]:hover {
background: var(--color-brand-hover);
}
/* Timestamp */
.file-timestamp[data-v-d8c43829] {
display: flex;
align-items: center;
gap: 4px;
padding: 0 12px 8px;
font-size: 11px;
color: var(--color-text-tertiary);
}
/* Responsive */
@media (max-width: 768px) {
.file-path[data-v-d8c43829] {
font-size: 12px;
}
.summary-title[data-v-d8c43829] {
font-size: 12px;
}
.summary-details[data-v-d8c43829] {
font-size: 11px;
}
.action-btn .btn-text[data-v-d8c43829] {
display: none;
}
.action-btn[data-v-d8c43829] {
padding: 4px 8px;
}
}
.assistant-message-wrapper[data-v-b5cd5901] {
position: relative;
padding-left: 4px;
}
.status-indicator[data-v-b5cd5901] {
padding: 12px 16px;
border-radius: 12px;
border: 1px solid rgba(63, 63, 70, 0.4);
background: linear-gradient(135deg,
rgba(39, 39, 42, 0.8) 0%,
rgba(24, 24, 27, 0.9) 100%
);
box-shadow:
0 4px 12px var(--shadow-md),
inset 0 1px 3px var(--color-border-subtle);
position: relative;
overflow: hidden;
}
/* Pending State */
.status-pending[data-v-b5cd5901] {
background: linear-gradient(135deg,
rgba(79, 70, 229, 0.1) 0%,
rgba(59, 130, 246, 0.05) 100%
);
border-color: rgba(79, 70, 229, 0.3);
}
.loading-spinner[data-v-b5cd5901] {
display: flex;
gap: 4px;
}
.spinner-ring[data-v-b5cd5901] {
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-brand-primary), #3b82f6);
animation: loading-pulse-b5cd5901 1.4s ease-in-out infinite both;
}
.spinner-ring[data-v-b5cd5901]:nth-child(1) { animation-delay: -0.32s;
}
.spinner-ring[data-v-b5cd5901]:nth-child(2) { animation-delay: -0.16s;
}
@keyframes loading-pulse-b5cd5901 {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1.2);
opacity: 1;
}
}
.progress-bar[data-v-b5cd5901] {
width: 200px;
height: 3px;
background: rgba(79, 70, 229, 0.2);
border-radius: 2px;
overflow: hidden;
margin-top: 4px;
}
.progress-fill[data-v-b5cd5901] {
height: 100%;
background: linear-gradient(90deg, var(--color-brand-primary), #3b82f6, var(--color-brand-primary));
background-size: 200% 100%;
animation: progress-wave-b5cd5901 4s ease-out infinite;
border-radius: 2px;
}
@keyframes progress-wave-b5cd5901 {
0% {
width: 0%;
}
20% {
width: 30%;
}
40% {
width: 50%;
}
60% {
width: 65%;
}
75% {
width: 80%;
}
85% {
width: 88%;
}
95% {
width: 95%;
}
100% {
width: 98%;
}
}
/* Streaming State */
.status-streaming[data-v-b5cd5901] {
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.1) 0%,
var(--color-brand-primary-5) 100%
);
border-color: rgba(34, 197, 94, 0.3);
}
.typing-indicator[data-v-b5cd5901] {
display: flex;
gap: 3px;
align-items: center;
}
.typing-dot[data-v-b5cd5901] {
width: 6px;
height: 6px;
background: linear-gradient(135deg, #22c55e, var(--color-brand-primary));
border-radius: 50%;
animation: typing-bounce-b5cd5901 1.4s ease-in-out infinite both;
}
.typing-dot[data-v-b5cd5901]:nth-child(1) { animation-delay: -0.32s;
}
.typing-dot[data-v-b5cd5901]:nth-child(2) { animation-delay: -0.16s;
}
@keyframes typing-bounce-b5cd5901 {
0%, 80%, 100% {
transform: translateY(0) scale(0.8);
opacity: 0.7;
}
40% {
transform: translateY(-8px) scale(1.1);
opacity: 1;
}
}
.streaming-bar[data-v-b5cd5901] {
width: 180px;
height: 3px;
background: rgba(34, 197, 94, 0.2);
border-radius: 2px;
overflow: hidden;
margin-top: 4px;
}
.streaming-fill[data-v-b5cd5901] {
height: 100%;
background: linear-gradient(90deg, #22c55e, var(--color-brand-primary), var(--color-brand-secondary));
background-size: 200% 100%;
animation: streaming-flow-b5cd5901 1.5s linear infinite;
width: 60%;
border-radius: 2px;
}
@keyframes streaming-flow-b5cd5901 {
0% {
transform: translateX(-100%);
background-position: 0% 50%;
}
100% {
transform: translateX(300%);
background-position: 200% 50%;
}
}
/* Complete State */
.status-complete[data-v-b5cd5901] {
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.1) 0%,
var(--color-brand-primary-5) 100%
);
border-color: rgba(34, 197, 94, 0.3);
animation: success-glow-b5cd5901 0.5s ease-out;
}
@keyframes success-glow-b5cd5901 {
0% {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}
100% {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
}
.success-icon[data-v-b5cd5901] {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.success-icon .material-icons[data-v-b5cd5901] {
color: #22c55e;
font-size: 18px;
animation: success-pop-b5cd5901 0.5s ease-out;
line-height: 1;
}
@keyframes success-pop-b5cd5901 {
0% { transform: scale(0.5); opacity: 0;
}
80% { transform: scale(1.1);
}
100% { transform: scale(1); opacity: 1;
}
}
/* Fail State */
.status-fail[data-v-b5cd5901] {
background: linear-gradient(135deg,
rgba(239, 68, 68, 0.1) 0%,
rgba(220, 38, 38, 0.05) 100%
);
border-color: rgba(239, 68, 68, 0.4);
animation: error-shake-b5cd5901 0.5s ease-out;
}
@keyframes error-shake-b5cd5901 {
0%, 100% { transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% { transform: translateX(-2px);
}
20%, 40%, 60%, 80% { transform: translateX(2px);
}
}
.error-icon[data-v-b5cd5901] {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.error-icon .material-icons[data-v-b5cd5901] {
color: #ef4444;
font-size: 18px;
animation: error-pulse-b5cd5901 2s ease-in-out infinite;
line-height: 1;
}
@keyframes error-pulse-b5cd5901 {
0%, 100% { opacity: 1;
}
50% { opacity: 0.7;
}
}
.error-detail[data-v-b5cd5901] {
font-size: 0.7rem;
color: rgba(239, 68, 68, 0.8);
margin-top: 2px;
font-style: italic;
}
/* Retry Button */
.retry-btn[data-v-b5cd5901] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: linear-gradient(135deg,
rgba(239, 68, 68, 0.8) 0%,
rgba(220, 38, 38, 0.9) 100%
);
border: 1px solid rgba(239, 68, 68, 0.6);
border-radius: 8px;
color: var(--text-primary);
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.retry-btn[data-v-b5cd5901]:hover {
background: linear-gradient(135deg,
rgba(239, 68, 68, 0.9) 0%,
rgba(220, 38, 38, 1) 100%
);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
.retry-btn[data-v-b5cd5901]:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}
.retry-btn .material-icons[data-v-b5cd5901] {
font-size: 16px;
animation: retry-spin-b5cd5901 2s linear infinite paused;
}
.retry-btn:hover .material-icons[data-v-b5cd5901] {
animation-play-state: running;
}
@keyframes retry-spin-b5cd5901 {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
/* Legacy Status */
.status-legacy[data-v-b5cd5901] {
background: linear-gradient(135deg,
rgba(100, 116, 139, 0.1) 0%,
rgba(71, 85, 105, 0.05) 100%
);
border-color: rgba(100, 116, 139, 0.3);
padding: 8px 12px;
}
.status-dot[data-v-b5cd5901] {
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow:
0 0 8px currentColor,
inset 0 1px 2px var(--color-border-subtle);
position: relative;
}
/* Status Text */
.status-text[data-v-b5cd5901] {
font-size: 0.75rem;
font-weight: 500;
color: rgba(244, 244, 245, 0.9);
}
.status-info[data-v-b5cd5901] {
flex: 1;
}
/* AI Message Content */
.ai-message-content[data-v-b5cd5901] {
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
padding: 0;
margin: 0;
line-height: 1.6;
color: var(--color-text-primary);
text-shadow: 0 1px 2px var(--shadow-sm);
transition: all 0.2s ease;
}
/* Streaming Content Animation - Smooth and stable */
.ai-message-content.streaming-content[data-v-b5cd5901] {
animation: streamingFadeIn-b5cd5901 0.6s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
}
.ai-message-content.complete-content[data-v-b5cd5901] {
animation: completeFadeIn-b5cd5901 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Clean fade-in without jittering */
@keyframes streamingFadeIn-b5cd5901 {
0% {
opacity: 0;
transform: translateY(8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes completeFadeIn-b5cd5901 {
0% {
opacity: 0.8;
transform: translateY(2px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Enhanced cursor with smooth pulse - Cursor style */
.ai-message-content.streaming-content p[data-v-b5cd5901]:last-child::after {
content: '▌';
color: #22c55e;
animation: cursorPulse-b5cd5901 1.2s ease-in-out infinite;
margin-left: 2px;
text-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
display: inline-block;
}
@keyframes cursorPulse-b5cd5901 {
0%, 100% {
opacity: 1;
transform: scaleY(1);
}
50% {
opacity: 0.4;
transform: scaleY(0.8);
}
}
/* Clean long-display state without excessive animations */
.ai-message-content.streaming-content.long-display[data-v-b5cd5901] {
position: relative;
}
.ai-message-content[data-v-b5cd5901]::before {
display: none;
}
.ai-message-content[data-v-b5cd5901]:hover {
color: rgba(255, 255, 255, 1);
transform: none;
box-shadow: none;
border: none;
background: transparent;
}
/* List Styling for AI Content */
.ai-message-content ol[data-v-b5cd5901] {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.ai-message-content ol > li[data-v-b5cd5901] {
margin: 1.5rem 0;
padding-left: 0.5rem;
position: relative;
border-left: 2px solid rgba(59, 130, 246, 0.2);
margin-left: 0.5rem;
}
.ai-message-content ul[data-v-b5cd5901] {
list-style: none;
padding: 0;
margin: 0.75rem 0;
}
.ai-message-content ul li[data-v-b5cd5901] {
padding-left: 1.5rem;
margin: 0.5rem 0;
position: relative;
}
/* Nested lists inside ordered list items */
.ai-message-content ol > li ul[data-v-b5cd5901] {
margin: 0.5rem 0 0 0;
padding-left: 0;
}
.ai-message-content ol > li ul li[data-v-b5cd5901] {
padding-left: 1rem;
margin: 0.25rem 0;
}
/* Headings inside list items */
.ai-message-content ol > li h3[data-v-b5cd5901] {
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
font-weight: 600;
color: #fbbf24;
line-height: 1.3;
}
.ai-message-content ol > li p[data-v-b5cd5901] {
margin: 0.5rem 0;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
}
/* Style for numbers that are already in the HTML content */
.ai-message-content ol > li > h3[data-v-b5cd5901]:first-child {
color: #60a5fa;
font-weight: 700;
}
/* Strong text styling */
.ai-message-content strong[data-v-b5cd5901] {
color: #60a5fa;
font-weight: 600;
}
/* Remove default margins and fix spacing */
.ai-message-content ol > li[data-v-b5cd5901] > *:first-child {
margin-top: 0;
}
.ai-message-content ol > li[data-v-b5cd5901] > *:last-child {
margin-bottom: 0;
}
/* Additional content styling */
.ai-message-content h1[data-v-b5cd5901],
.ai-message-content h2[data-v-b5cd5901],
.ai-message-content h3[data-v-b5cd5901],
.ai-message-content h4[data-v-b5cd5901],
.ai-message-content h5[data-v-b5cd5901],
.ai-message-content h6[data-v-b5cd5901] {
color: #fbbf24;
font-weight: 600;
margin: 0.75rem 0 0.5rem 0;
line-height: 1.3;
}
.ai-message-content p[data-v-b5cd5901] {
margin: 0.5rem 0;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
.ai-message-content em[data-v-b5cd5901] {
color: var(--color-brand-secondary);
font-style: italic;
}
.ai-message-content code[data-v-b5cd5901] {
background: rgba(55, 65, 81, 0.8);
color: #fde047;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 0.875em;
}
.ai-message-content blockquote[data-v-b5cd5901] {
border-left: 3px solid #3b82f6;
padding-left: 1rem;
margin: 1rem 0;
color: rgba(255, 255, 255, 0.8);
font-style: italic;
}
/* Tables */
.ai-message-content table[data-v-b5cd5901] {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
border: 1px solid rgba(107, 114, 128, 0.3);
}
.ai-message-content th[data-v-b5cd5901],
.ai-message-content td[data-v-b5cd5901] {
border: 1px solid rgba(107, 114, 128, 0.3);
padding: 0.5rem;
text-align: left;
}
.ai-message-content th[data-v-b5cd5901] {
background: rgba(55, 65, 81, 0.8);
font-weight: 600;
color: #60a5fa;
}
/* Fix for any remaining list style issues */
.ai-message-content ul ul[data-v-b5cd5901],
.ai-message-content ol ol[data-v-b5cd5901],
.ai-message-content ol ul[data-v-b5cd5901],
.ai-message-content ul ol[data-v-b5cd5901] {
margin: 0.25rem 0;
}
/* Ensure clean display without browser defaults */
.ai-message-content[data-v-b5cd5901] * {
list-style: none !important;
}
/* Clean ordered list styling - no pseudo-elements needed since HTML contains numbers */
.ai-message-content ol[data-v-b5cd5901] {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.ai-message-content ol > li[data-v-b5cd5901] {
margin: 1.5rem 0;
padding-left: 0.5rem;
position: relative;
border-left: 2px solid rgba(59, 130, 246, 0.2);
margin-left: 0.5rem;
}
/* Keep ::before for unordered lists (for bullet points) */
.ai-message-content ul li[data-v-b5cd5901]::before {
content: "•";
color: var(--color-brand-primary);
font-weight: 600;
position: absolute;
left: 0;
top: 0;
}
.ai-message-content ol > li ul li[data-v-b5cd5901]::before {
content: "◦";
color: #6b7280;
left: 0;
}
/* Checkpoint Controls */
.checkpoint-controls[data-v-b5cd5901] {
background: linear-gradient(135deg,
rgba(39, 39, 42, 0.8) 0%,
rgba(24, 24, 27, 0.9) 50%,
rgba(18, 18, 20, 0.95) 100%
);
border: 1px solid rgba(63, 63, 70, 0.5);
border-radius: 8px;
padding: 12px;
margin-top: 8px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 2px rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
}
.checkpoint-controls[data-v-b5cd5901]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(79, 70, 229, 0.4) 30%,
rgba(59, 130, 246, 0.3) 70%,
transparent 100%
);
}
.checkpoint-header[data-v-b5cd5901] {
align-items: center;
gap: 8px;
margin-bottom: 0;
}
.checkpoint-icon-container[data-v-b5cd5901] {
width: 24px;
height: 24px;
background: linear-gradient(135deg,
rgba(79, 70, 229, 0.2) 0%,
rgba(59, 130, 246, 0.15) 100%
);
border: 1px solid rgba(79, 70, 229, 0.3);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 1px 4px rgba(79, 70, 229, 0.2),
inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.checkpoint-icon-container .material-icons[data-v-b5cd5901] {
font-size: 14px;
}
.checkpoint-details[data-v-b5cd5901] {
flex: 1;
}
.checkpoint-title[data-v-b5cd5901] {
font-size: 0.75rem;
font-weight: 500;
color: rgba(147, 197, 253, 1);
line-height: 1.2;
}
.checkpoint-status[data-v-b5cd5901] {
color: rgba(156, 163, 175, 0.8);
font-size: 0.6875rem;
margin-top: 1px;
}
.checkpoint-actions[data-v-b5cd5901] {
gap: 6px;
}
.checkpoint-btn[data-v-b5cd5901] {
background: transparent;
border: 1px solid rgba(var(--btn-color), 0.3);
border-radius: 6px;
color: rgba(var(--btn-color), 1);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
width: 28px;
height: 28px;
justify-content: center;
}
.checkpoint-btn[data-v-b5cd5901]:hover {
background: rgba(var(--btn-color), 0.1);
border-color: rgba(var(--btn-color), 0.5);
color: rgba(var(--btn-color), 1);
}
.checkpoint-btn[data-v-b5cd5901]:active {
background: rgba(var(--btn-color), 0.2);
transform: scale(0.95);
}
.checkpoint-btn .material-icons[data-v-b5cd5901] {
line-height: 1;
font-size: 14px;
}
.restore-btn[data-v-b5cd5901] {
--btn-color: 234, 88, 12;
padding: 4px;
width: 24px;
height: 24px;
}
.reapply-btn[data-v-b5cd5901] {
--btn-color: 37, 99, 235;
padding: 4px;
width: 24px;
height: 24px;
}
.checkpoint-error[data-v-b5cd5901] {
background: linear-gradient(135deg,
rgba(239, 68, 68, 0.1) 0%,
rgba(220, 38, 38, 0.05) 100%
);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 6px;
padding: 8px;
margin-top: 8px;
display: flex;
align-items: flex-start;
gap: 6px;
box-shadow: inset 0 1px 2px rgba(239, 68, 68, 0.1);
font-size: 0.6875rem;
}
.checkpoint-error .material-icons[data-v-b5cd5901] {
margin-top: 1px;
flex-shrink: 0;
font-size: 12px;
}
/* Action Buttons */
.action-buttons[data-v-b5cd5901] {
padding: 8px 0;
margin-top: 8px;
border-top: 1px solid rgba(63, 63, 70, 0.2);
}
.action-btn[data-v-b5cd5901] {
background: transparent;
border: none;
box-shadow: none;
padding: 4px;
border-radius: 4px;
transition: all 0.2s ease;
position: relative;
}
.action-btn[data-v-b5cd5901]::before {
display: none;
}
.action-btn[data-v-b5cd5901]:hover {
background: rgba(63, 63, 70, 0.3);
transform: none;
box-shadow: none;
border: none;
}
.action-btn[data-v-b5cd5901]:active {
background: rgba(63, 63, 70, 0.5);
transform: scale(0.95);
box-shadow: none;
}
/* Responsive */
@media (max-width: 768px) {
.assistant-message-wrapper[data-v-b5cd5901] {
padding-left: 2px;
}
.status-indicator[data-v-b5cd5901] {
padding: 10px 12px;
}
.progress-bar[data-v-b5cd5901],
.streaming-bar[data-v-b5cd5901] {
width: 150px;
}
.retry-btn[data-v-b5cd5901] {
padding: 6px 10px;
font-size: 0.7rem;
}
.action-buttons[data-v-b5cd5901] {
flex-direction: row;
justify-content: flex-start;
gap: 12px;
}
/* Responsive list styling */
.ai-message-content ol > li[data-v-b5cd5901] {
margin: 1rem 0;
}
.ai-message-content ol > li h3[data-v-b5cd5901] {
font-size: 1rem;
}
.ai-message-content ul li[data-v-b5cd5901] {
padding-left: 1.2rem;
}
.ai-message-content ol > li ul li[data-v-b5cd5901] {
padding-left: 0.8rem;
}
}
/* Enhanced Execution Details */
.execution-details[data-v-b5cd5901] {
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
padding: 8px;
margin-top: 6px;
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.execution-details[data-v-b5cd5901]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-brand-primary) 30%,
var(--color-brand-primary) 70%,
transparent 100%
);
opacity: 0.3;
}
.execution-header[data-v-b5cd5901] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 6px;
}
.execution-info[data-v-b5cd5901] {
flex: 1;
margin-right: 12px;
}
.execution-title[data-v-b5cd5901] {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.execution-badge[data-v-b5cd5901] {
font-size: 10px;
font-weight: 600;
}
.execution-meta[data-v-b5cd5901] {
display: flex;
flex-direction: column;
gap: 2px;
}
.execution-meta > div[data-v-b5cd5901] {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: var(--color-text-tertiary);
}
.execution-actions[data-v-b5cd5901] {
display: flex;
align-items: center;
gap: 4px;
}
.details-btn[data-v-b5cd5901] {
padding: 4px;
border-radius: 4px;
transition: all 0.2s ease;
background: transparent;
border: none;
cursor: pointer;
}
.details-btn[data-v-b5cd5901]:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
/* Expanded Details Sections */
.execution-expanded[data-v-b5cd5901] {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--color-border-subtle);
}
.section-title[data-v-b5cd5901] {
font-weight: 500;
color: var(--color-text-tertiary);
margin-bottom: 6px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.affected-files-section[data-v-b5cd5901],
.diffs-section[data-v-b5cd5901],
.tools-section[data-v-b5cd5901] {
margin-bottom: 8px;
}
.files-list[data-v-b5cd5901] {
display: flex;
flex-direction: column;
gap: 4px;
}
.file-item[data-v-b5cd5901] {
background: var(--color-bg-elevated);
padding: 6px 8px;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 11px;
color: var(--color-text-primary);
border: 1px solid var(--color-border-subtle);
}
.diffs-list[data-v-b5cd5901] {
display: flex;
flex-direction: column;
gap: 8px;
}
.diff-item[data-v-b5cd5901] {
background: var(--color-bg-elevated);
border-radius: 6px;
border: 1px solid var(--color-border-subtle);
overflow: hidden;
}
.diff-item-header[data-v-b5cd5901] {
background: var(--color-bg-secondary);
}
.file-info[data-v-b5cd5901] {
display: flex;
align-items: center;
gap: 8px;
}
.status-badge[data-v-b5cd5901] {
font-weight: 500;
border: 1px solid currentColor;
}
.diff-toggle-btn[data-v-b5cd5901] {
padding: 4px;
border-radius: 4px;
transition: all 0.2s ease;
}
.diff-toggle-btn[data-v-b5cd5901]:hover {
background: var(--color-bg-hover);
}
.diff-explanation[data-v-b5cd5901] {
background: var(--color-bg-secondary);
}
.diff-explanation > div[data-v-b5cd5901]:first-child {
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
.diff-explanation > div[data-v-b5cd5901]:last-child {
color: var(--color-text-primary);
line-height: 1.4;
}
.diff-viewer-container[data-v-b5cd5901] {
background: var(--color-code-bg);
}
/* Streaming diff viewer styling */
.streaming-diff .diff-viewer-container[data-v-b5cd5901] {
background: var(--color-code-bg);
border: 1px solid var(--color-brand-primary);
border-radius: 6px;
overflow: hidden;
position: relative;
opacity: 0.8;
}
.streaming-diff .diff-viewer-container[data-v-b5cd5901]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-brand-primary) 30%,
var(--color-brand-primary) 70%,
transparent 100%
);
opacity: 0.4;
}
.show-diff-prompt[data-v-b5cd5901] {
background: var(--color-bg-secondary);
border-top: 1px solid var(--color-border-subtle);
}
.show-diff-btn[data-v-b5cd5901] {
background: transparent;
border: 1px solid var(--color-brand-primary);
padding: 6px 12px;
border-radius: 4px;
transition: all 0.2s ease;
opacity: 0.7;
}
.show-diff-btn[data-v-b5cd5901]:hover {
background: var(--color-brand-primary);
opacity: 0.1;
border-color: var(--color-brand-primary);
}
.tools-list[data-v-b5cd5901] {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.tool-badge[data-v-b5cd5901] {
background: var(--color-brand-primary);
color: var(--color-text-primary);
font-size: 10px;
padding: 3px 8px;
border-radius: 4px;
font-weight: 500;
border: 1px solid var(--color-brand-primary);
opacity: 0.8;
}
.execution-error[data-v-b5cd5901] {
background: var(--color-error-bg);
border: 1px solid var(--color-error);
border-radius: 6px;
padding: 8px;
margin-top: 8px;
display: flex;
align-items: flex-start;
gap: 6px;
box-shadow: var(--shadow-sm);
font-size: 0.6875rem;
}
.execution-error .material-icons[data-v-b5cd5901] {
margin-top: 1px;
flex-shrink: 0;
font-size: 12px;
}
/* Clean Thinking Process Styles - No background colors */
.thinking-process-container[data-v-b5cd5901] {
animation: fadeIn-b5cd5901 0.3s ease-out;
}
@keyframes fadeIn-b5cd5901 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.thinking-process[data-v-b5cd5901] {
position: relative;
transition: opacity 0.2s ease;
}
.thinking-icon-wrapper[data-v-b5cd5901] {
margin-top: 2px;
}
.thinking-icon[data-v-b5cd5901] {
animation: pulse-icon-b5cd5901 2s ease-in-out infinite;
}
@keyframes pulse-icon-b5cd5901 {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.thinking-header[data-v-b5cd5901] {
opacity: 0.8;
}
.thinking-content[data-v-b5cd5901] {
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.6;
}
.thinking-spinner[data-v-b5cd5901] {
display: flex;
gap: 4px;
align-items: center;
}
.spinner-dot[data-v-b5cd5901] {
width: 3px;
height: 3px;
background: var(--color-text-tertiary);
border-radius: 50%;
animation: thinking-pulse-b5cd5901 1.2s ease-in-out infinite both;
}
.spinner-dot[data-v-b5cd5901]:nth-child(1) { animation-delay: -0.24s;
}
.spinner-dot[data-v-b5cd5901]:nth-child(2) { animation-delay: -0.12s;
}
.spinner-dot[data-v-b5cd5901]:nth-child(3) { animation-delay: 0s;
}
@keyframes thinking-pulse-b5cd5901 {
0%, 80%, 100% {
transform: scale(0.7);
opacity: 0.3;
}
40% {
transform: scale(1.2);
opacity: 1;
}
}
.thinking-timer[data-v-b5cd5901] {
opacity: 0.7;
display: inline-flex;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.thinking-process[data-v-b5cd5901] {
padding-left: 8px;
}
.thinking-content[data-v-b5cd5901] {
font-size: 0.813rem;
}
}
/* Tool Call Sections - Cursor style */
.tool-calls-container[data-v-b5cd5901] {
width: 100%;
}
.tool-call-section[data-v-b5cd5901] {
transition: all 0.2s ease;
position: relative;
border-radius: 8px;
overflow: hidden;
padding: 4px;
margin: 2px 0;
}
/* Cursor-style left-to-right shimmer for running tools */
.tool-call-section.running[data-v-b5cd5901] {
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.05) 0%,
var(--color-brand-primary-3) 100%
);
}
.tool-call-section.running[data-v-b5cd5901]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(59, 130, 246, 0.1) 30%,
rgba(147, 197, 253, 0.2) 50%,
rgba(59, 130, 246, 0.1) 70%,
transparent 100%
);
animation: toolShimmer-b5cd5901 2s ease-in-out infinite;
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
/* Enhanced styling for currently streaming tool */
.tool-call-section.is-current-streaming[data-v-b5cd5901] {
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.08) 0%,
var(--color-brand-primary-5) 100%
);
}
.tool-call-section.is-current-streaming[data-v-b5cd5901]::before {
background: linear-gradient(
90deg,
transparent 0%,
rgba(34, 197, 94, 0.15) 30%,
var(--color-brand-primary-25) 50%,
rgba(34, 197, 94, 0.15) 70%,
transparent 100%
);
animation: currentToolShimmer-b5cd5901 1.8s ease-in-out infinite;
border-radius: inherit;
}
@keyframes toolShimmer-b5cd5901 {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@keyframes currentToolShimmer-b5cd5901 {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.tool-header[data-v-b5cd5901] {
position: relative;
z-index: 2;
}
.tool-icon[data-v-b5cd5901] {
transition: all 0.2s ease;
}
.tool-svg-icon[data-v-b5cd5901] {
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
}
.tool-svg-icon svg[data-v-b5cd5901] {
width: 12px;
height: 12px;
stroke: currentColor;
fill: none;
}
.tool-info[data-v-b5cd5901] {
min-width: 0;
flex: 1;
}
.tool-name[data-v-b5cd5901] {
font-weight: 500;
line-height: 1.2;
}
.tool-description[data-v-b5cd5901] {
line-height: 1.3;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tool-status[data-v-b5cd5901] {
font-weight: 500;
}
.tool-details[data-v-b5cd5901] {
animation: expand-in-b5cd5901 0.2s ease-out;
}
@keyframes expand-in-b5cd5901 {
from {
opacity: 0;
max-height: 0;
}
to {
opacity: 1;
max-height: 300px;
}
}
.tool-input[data-v-b5cd5901], .tool-output[data-v-b5cd5901] {
position: relative;
}
.tool-input pre[data-v-b5cd5901], .tool-output pre[data-v-b5cd5901] {
background: var(--color-code-bg);
border: 1px solid var(--color-border-subtle);
border-radius: 4px;
padding: 8px;
font-size: 11px;
line-height: 1.4;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
color: var(--color-text-primary);
}
.tool-duration[data-v-b5cd5901] {
display: flex;
align-items: center;
gap: 4px;
color: var(--color-text-tertiary);
}
/* Animation for tool completion */
.tool-call-section.completed[data-v-b5cd5901] {
}
/* Rendered Markdown Styling */
.ai-message-content .rendered-markdown[data-v-b5cd5901] {
margin: 0.5rem 0;
padding: 1rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-subtle);
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.ai-message-content .rendered-markdown h1[data-v-b5cd5901],
.ai-message-content .rendered-markdown h2[data-v-b5cd5901],
.ai-message-content .rendered-markdown h3[data-v-b5cd5901],
.ai-message-content .rendered-markdown h4[data-v-b5cd5901],
.ai-message-content .rendered-markdown h5[data-v-b5cd5901],
.ai-message-content .rendered-markdown h6[data-v-b5cd5901] {
color: #fbbf24;
font-weight: 600;
margin: 1rem 0 0.5rem 0;
line-height: 1.3;
}
.ai-message-content .rendered-markdown h1[data-v-b5cd5901]:first-child,
.ai-message-content .rendered-markdown h2[data-v-b5cd5901]:first-child,
.ai-message-content .rendered-markdown h3[data-v-b5cd5901]:first-child,
.ai-message-content .rendered-markdown h4[data-v-b5cd5901]:first-child,
.ai-message-content .rendered-markdown h5[data-v-b5cd5901]:first-child,
.ai-message-content .rendered-markdown h6[data-v-b5cd5901]:first-child {
margin-top: 0;
}
.ai-message-content .rendered-markdown p[data-v-b5cd5901] {
margin: 0.75rem 0;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
text-align: justify;
}
.ai-message-content .rendered-markdown p[data-v-b5cd5901]:first-child {
margin-top: 0;
}
.ai-message-content .rendered-markdown p[data-v-b5cd5901]:last-child {
margin-bottom: 0;
}
.ai-message-content .rendered-markdown strong[data-v-b5cd5901] {
color: #60a5fa;
font-weight: 600;
}
.ai-message-content .rendered-markdown em[data-v-b5cd5901] {
color: var(--color-brand-secondary);
font-style: italic;
}
.ai-message-content .rendered-markdown code[data-v-b5cd5901] {
background: rgba(55, 65, 81, 0.8);
color: #fde047;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 0.875em;
}
.ai-message-content .rendered-markdown blockquote[data-v-b5cd5901] {
border-left: 3px solid #3b82f6;
padding-left: 1rem;
margin: 1rem 0;
color: rgba(255, 255, 255, 0.8);
font-style: italic;
background: rgba(59, 130, 246, 0.05);
border-radius: 0 0.25rem 0.25rem 0;
}
/* Dark theme optimizations */
@media (prefers-color-scheme: dark) {
.status-indicator[data-v-b5cd5901] {
background: linear-gradient(135deg,
rgba(15, 15, 17, 0.9) 0%,
rgba(9, 9, 11, 0.95) 100%
);
border-color: rgba(82, 82, 91, 0.3);
}
.status-text[data-v-b5cd5901] {
color: rgba(244, 244, 245, 0.95);
}
.tool-calls-container[data-v-b5cd5901] {
width: 100%;
}
.tool-description[data-v-b5cd5901] {
white-space: normal;
line-height: 1.4;
}
}
/* Utility text colors (fallback if not provided by global css) */
.text-status-success[data-v-b5cd5901] {
color: var(--color-status-success, #22c55e); /* Tailwind green-500 fallback */
}
.text-status-error[data-v-b5cd5901] {
color: var(--color-status-error, #ef4444); /* Tailwind red-500 fallback */
}
/* Light/Dark fixed colors for tool icons */
.tool-blue[data-v-b5cd5901] { background: rgba(59,130,246,0.15); color:#2563eb;
}
.dark .tool-blue[data-v-b5cd5901] { background: rgba(59,130,246,0.15); color:#93c5fd;
}
.tool-purple[data-v-b5cd5901] { background: var(--color-brand-primary-15); color:var(--color-brand-primary);
}
.dark .tool-purple[data-v-b5cd5901] { background: var(--color-brand-primary-15); color:#d8b4fe;
}
.tool-amber[data-v-b5cd5901] { background: rgba(245,158,11,0.15); color:#d97706;
}
.dark .tool-amber[data-v-b5cd5901] { background: rgba(245,158,11,0.15); color:#fcd34d;
}
.tool-green[data-v-b5cd5901] { background: rgba(34,197,94,0.15); color:var(--color-brand-secondary);
}
.dark .tool-green[data-v-b5cd5901] { background: rgba(34,197,94,0.15); color:var(--color-brand-secondary);
}
.tool-zinc[data-v-b5cd5901] { background: rgba(113,113,122,0.15); color:#52525b;
}
.dark .tool-zinc[data-v-b5cd5901] { background: rgba(113,113,122,0.15); color:#d4d4d8;
}
.tool-red[data-v-b5cd5901] { background: rgba(239,68,68,0.15); color:#dc2626;
}
.dark .tool-red[data-v-b5cd5901] { background: rgba(239,68,68,0.15); color:#fca5a5;
}
.tool-cyan[data-v-b5cd5901] { background: rgba(6,182,212,0.15); color:#0e7490;
}
.dark .tool-cyan[data-v-b5cd5901] { background: rgba(6,182,212,0.15); color:#67e8f9;
}
.tool-indigo[data-v-b5cd5901] { background: var(--color-brand-primary-15); color:var(--color-brand-secondary);
}
.dark .tool-indigo[data-v-b5cd5901] { background: var(--color-brand-secondary-15); color:var(--color-brand-secondary);
}
.message-container[data-v-93d16280] {
/* Seamless integration with chat panel */
background: var(--color-bg-primary);
border-radius: 0;
margin: 0;
padding-left: 16px !important;
padding-right: 16px !important;
padding-top: 16px !important;
border: none;
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
/* Empty state styling - modern and inviting */
.empty-state[data-v-93d16280] {
position: relative;
padding: 2rem 1.5rem;
}
.empty-icon[data-v-93d16280] {
background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.welcome-header h3[data-v-93d16280] {
background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-brand-primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Example prompt cards */
.example-prompt-card[data-v-93d16280] {
cursor: pointer;
position: relative;
overflow: hidden;
}
.example-prompt-card[data-v-93d16280]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.example-prompt-card[data-v-93d16280]:hover::before {
opacity: 0.03;
}
.example-prompt-card[data-v-93d16280]:active {
transform: scale(0.98);
}
/* Quick tips badges */
.tip-badge[data-v-93d16280] {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.2s ease;
}
/* Animation for empty state entrance */
.empty-state-container[data-v-93d16280] {
animation: fadeInUp-93d16280 0.5s ease-out;
}
@keyframes fadeInUp-93d16280 {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stagger animation for prompt cards */
.example-prompt-card[data-v-93d16280] {
animation: fadeInScale-93d16280 0.4s ease-out backwards;
}
.example-prompt-card[data-v-93d16280]:nth-child(1) { animation-delay: 0.1s;
}
.example-prompt-card[data-v-93d16280]:nth-child(2) { animation-delay: 0.2s;
}
.example-prompt-card[data-v-93d16280]:nth-child(3) { animation-delay: 0.3s;
}
.example-prompt-card[data-v-93d16280]:nth-child(4) { animation-delay: 0.4s;
}
@keyframes fadeInScale-93d16280 {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Messages list container */
.messages-list[data-v-93d16280] {
position: relative;
z-index: 11;
}
/* Clean scrollbar styling */
.custom-scrollbar[data-v-93d16280] {
scrollbar-color: transparent transparent;
scrollbar-width: thin;
}
.custom-scrollbar[data-v-93d16280]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar[data-v-93d16280]::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar[data-v-93d16280]::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
/* Scrollbar visible state */
.message-container.scrollbar-visible[data-v-93d16280]::-webkit-scrollbar-thumb {
background: var(--color-border-subtle);
border: 1px solid var(--color-border-primary);
}
.message-container.scrollbar-visible[data-v-93d16280]::-webkit-scrollbar-thumb:hover {
background: var(--color-bg-hover);
}
/* Firefox support */
.message-container.scrollbar-visible[data-v-93d16280] {
scrollbar-color: var(--color-border-subtle) transparent;
}
/* Message Item Styling */
.message-item[data-v-93d16280] {
transition: all 0.2s ease;
}
.message-item.unread[data-v-93d16280] {
position: relative;
}
.message-item.unread[data-v-93d16280]::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 20px;
background: linear-gradient(to bottom, var(--brand-primary), var(--brand-secondary));
border-radius: 2px;
animation: unread-pulse-93d16280 2s ease-in-out infinite;
}
@keyframes unread-pulse-93d16280 {
0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1);
}
50% { opacity: 1; transform: translateY(-50%) scale(1.1);
}
}
/* Scroll to Bottom Button - Enhanced styling */
.scroll-to-bottom-container[data-v-93d16280] {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}
.scroll-to-bottom-btn[data-v-93d16280] {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: var(--color-bg-primary) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.scroll-to-bottom-btn[data-v-93d16280]:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.scroll-to-bottom-btn.has-unread[data-v-93d16280] {
border-color: var(--color-brand-primary);
background: rgba(59, 130, 246, 0.05) !important;
}
/* Unread Badge */
.unread-badge[data-v-93d16280] {
font-size: 10px;
font-weight: 500;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
z-index: 10;
}
/* Scroll Progress Indicator */
.scroll-progress-indicator[data-v-93d16280] {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 3px;
background: var(--color-bg-secondary);
z-index: 1000;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: progress-indicator-fade-in-93d16280 0.3s ease-out;
}
.scroll-progress-bar[data-v-93d16280] {
height: 100%;
min-width: 0%;
max-width: 100%;
background: linear-gradient(90deg,
var(--brand-primary) 0%,
var(--brand-secondary) 50%,
var(--brand-tertiary) 100%
);
box-shadow:
0 0 6px var(--brand-primary-opacity-60),
0 1px 3px var(--brand-primary-opacity-40);
transition: width 0.1s ease-out;
border-radius: 0 3px 3px 0;
position: relative;
}
.scroll-progress-bar[data-v-93d16280]::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: var(--color-text-primary);
border-radius: 0 3px 3px 0;
animation: progress-glow-93d16280 2s ease-in-out infinite;
}
@keyframes progress-indicator-fade-in-93d16280 {
from {
opacity: 0;
transform: scaleX(0);
}
to {
opacity: 1;
transform: scaleX(1);
}
}
@keyframes progress-glow-93d16280 {
0%, 100% { opacity: 0.6;
}
50% { opacity: 1;
}
}
/* Transition Animations */
.scroll-button-enter-active[data-v-93d16280],
.scroll-button-leave-active[data-v-93d16280] {
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.scroll-button-enter-from[data-v-93d16280] {
opacity: 0;
transform: translateY(20px) scale(0.8);
}
.scroll-button-leave-to[data-v-93d16280] {
opacity: 0;
transform: translateY(10px) scale(0.9);
}
/* Simple active state */
.scroll-to-bottom-btn[data-v-93d16280]:active {
transform: scale(0.98);
}
/* Responsive optimization */
@media (max-width: 768px) {
.message-container[data-v-93d16280] {
margin: 0;
border-radius: 0;
}
.empty-state[data-v-93d16280] {
padding: 1.5rem 1rem;
}
.welcome-header[data-v-93d16280] {
margin-bottom: 1.5rem !important;
}
.welcome-header h3[data-v-93d16280] {
font-size: 1rem;
}
.example-prompts-grid[data-v-93d16280] {
gap: 0.5rem;
}
.example-prompt-card[data-v-93d16280] {
padding: 0.875rem;
}
.quick-tips[data-v-93d16280] {
margin-top: 1rem !important;
}
.tip-badge[data-v-93d16280] {
font-size: 0.7rem;
padding: 0.375rem 0.75rem;
}
.custom-scrollbar[data-v-93d16280]::-webkit-scrollbar {
width: 4px;
}
.scroll-to-bottom-container[data-v-93d16280] {
bottom: 20px;
right: 16px;
}
.scroll-to-bottom-btn[data-v-93d16280] {
width: 44px;
height: 44px;
}
.unread-badge[data-v-93d16280] {
width: 18px;
height: 18px;
font-size: 9px;
}
.message-item.unread[data-v-93d16280]::before {
left: -4px;
width: 2px;
height: 16px;
}
.scroll-progress-indicator[data-v-93d16280] {
height: 2px;
}
.scroll-progress-bar[data-v-93d16280]::after {
width: 1px;
}
}
/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
.scroll-progress-bar[data-v-93d16280] {
box-shadow: 0 1px 3px var(--brand-primary-opacity-60);
}
.scroll-progress-indicator[data-v-93d16280] {
background: var(--color-bg-tertiary);
}
.unread-badge[data-v-93d16280] {
border-color: var(--color-bg-primary);
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.message-item.unread[data-v-93d16280]::before {
animation: none;
}
.scroll-to-bottom-btn[data-v-93d16280],
.scroll-progress-bar[data-v-93d16280] {
transition: none;
}
}
/* Focus styles for accessibility */
.scroll-to-bottom-btn[data-v-93d16280]:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.scroll-to-bottom-btn[data-v-93d16280] {
border: 2px solid currentColor;
}
.unread-badge[data-v-93d16280] {
border: 2px solid currentColor;
}
.message-item.unread[data-v-93d16280]::before {
background: currentColor;
}
}
/* Command Bar Styles */
/* Command bar wrapper - unified container */
.command-bar-wrapper {
background: var(--color-bg-primary);
border-radius: 0;
flex-shrink: 0;
padding: 12px;
margin: 0;
animation: fadeIn 0.25s ease-out;
position: relative;
}
/* Command input container */
.command-input-container {
padding: 0;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
background: transparent;
border: none;
border-radius: 0;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.command-input-container:hover {
background: transparent;
}
.command-input-container:has(.command-level-2.focused) {
background: transparent;
}
/* Level 1: Context Area (Files, Selections, etc.) - Inside unified box */
.command-level-1 {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 6px;
min-height: -moz-fit-content;
min-height: fit-content;
background: transparent;
padding: 0;
border-radius: 0;
border: none;
margin-bottom: 4px;
}
.unified-tags-display {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1;
align-items: center;
min-width: 0; /* Allow shrinking */
max-width: 100%; /* Prevent overflow */
}
/* File Chips - Cursor-style subtle chips */
.selected-file-chip {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 6px;
background: var(--color-brand-primary-10);
border: 1px solid var(--color-brand-primary-20);
border-radius: 6px;
font-size: 12px;
color: var(--color-brand-primary);
max-width: min(220px, 45vw);
height: 22px;
flex-shrink: 0;
position: relative;
box-shadow: none;
transition: all 0.15s ease;
}
.selected-file-chip:hover {
background: var(--color-brand-primary-15);
border-color: var(--color-brand-primary-30);
box-shadow: none;
}
.file-chip-icon {
font-size: 14px !important;
color: var(--color-brand-primary);
flex-shrink: 0;
}
.file-chip-name {
font-size: 11px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
line-height: 1.3;
}
.file-chip-remove {
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--color-brand-primary);
opacity: 0.6;
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.file-chip-remove:hover {
background: var(--color-brand-primary-20);
opacity: 1;
}
.file-chip-remove .material-icons {
font-size: 10px;
}
/* Current document chip styling - Cursor-style subtle highlight */
.current-document-chip {
background: var(--color-brand-primary-15) !important;
border: 1px solid var(--color-brand-primary-30) !important;
color: var(--color-brand-primary) !important;
max-width: min(280px, 55vw) !important;
box-shadow: 0 0 0 1px var(--color-brand-primary-10) !important;
}
.current-document-chip:hover {
background: var(--color-brand-primary-20) !important;
border-color: var(--color-brand-primary-40) !important;
box-shadow: 0 0 0 1px var(--color-brand-primary-15) !important;
}
.current-document-chip .file-chip-icon {
color: var(--color-brand-secondary) !important;
}
.current-doc-indicator {
font-size: 10px !important;
color: var(--color-brand-secondary);
flex-shrink: 0;
}
/* Selected Content Chip Styles - Dark Mode */
.selected-content-chip {
display: flex;
align-items: center;
gap: 3px;
padding: 2px 4px 2px 6px;
background: rgba(0, 0, 0, 0.08);
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
font-size: 10px;
color: rgba(255, 255, 255, 0.9);
max-width: min(250px, 55vw);
height: 20px;
flex-shrink: 0; /* Prevent unwanted shrinking */
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
/* Selected Content Chip Styles - Light Mode */
[data-theme="light"] .selected-content-chip {
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.9);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.selected-content-chip:hover {
background: rgba(0, 0, 0, 0.12);
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .selected-content-chip:hover {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.content-chip-icon {
font-size: 12px !important;
color: rgba(255, 255, 255, 0.85);
flex-shrink: 0;
}
[data-theme="light"] .content-chip-icon {
color: rgba(0, 0, 0, 0.7);
}
.content-chip-text {
font-size: 9px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
line-height: 1.2;
}
.content-chip-length {
font-size: 9px;
color: rgba(255, 255, 255, 0.65);
font-weight: 400;
flex-shrink: 0;
}
[data-theme="light"] .content-chip-length {
color: rgba(0, 0, 0, 0.5);
}
.content-chip-remove {
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.65);
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
[data-theme="light"] .content-chip-remove {
color: rgba(0, 0, 0, 0.5);
}
.content-chip-remove:hover {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 1);
}
[data-theme="light"] .content-chip-remove:hover {
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.9);
}
.content-chip-remove .material-icons {
font-size: 10px;
}
/* Additional Context Chips - Dark Mode */
.additional-context-chip {
display: flex;
align-items: center;
gap: 3px;
padding: 2px 4px 2px 6px;
background: rgba(0, 0, 0, 0.08);
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
font-size: 10px;
color: rgba(255, 255, 255, 0.9);
max-width: min(250px, 55vw);
height: 20px;
flex-shrink: 0; /* Prevent unwanted shrinking */
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
/* Additional Context Chips - Light Mode */
[data-theme="light"] .additional-context-chip {
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.9);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.additional-context-chip:hover {
background: rgba(0, 0, 0, 0.12);
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .additional-context-chip:hover {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* @ Mention Dropdown */
.mention-dropdown,
.mention-dropdown-portal {
background: white;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
border: 1px solid #e5e5e5;
min-width: 250px;
}
.dark .mention-dropdown,
.dark .mention-dropdown-portal {
background: #1f1f1f;
border-color: #333;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
/* Custom scrollbar for mention dropdown */
.mention-dropdown-portal .overflow-y-auto::-webkit-scrollbar {
width: 6px;
}
.mention-dropdown-portal .overflow-y-auto::-webkit-scrollbar-track {
background: transparent;
}
.mention-dropdown-portal .overflow-y-auto::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
.mention-dropdown-portal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
background-color: rgba(156, 163, 175, 0.8);
}
.dark .mention-dropdown-portal .overflow-y-auto::-webkit-scrollbar-thumb {
background-color: rgba(75, 85, 99, 0.5);
}
.dark .mention-dropdown-portal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
background-color: rgba(75, 85, 99, 0.8);
}
/* Fade transition for dropdown */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.2s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
.context-chip-icon {
font-size: 12px !important;
color: rgba(255, 255, 255, 0.85);
flex-shrink: 0;
}
[data-theme="light"] .context-chip-icon {
color: rgba(0, 0, 0, 0.7);
}
.context-chip-text {
font-size: 9px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
line-height: 1.2;
}
.context-chip-length {
font-size: 9px;
color: rgba(255, 255, 255, 0.65);
font-weight: 400;
flex-shrink: 0;
}
[data-theme="light"] .context-chip-length {
color: rgba(0, 0, 0, 0.5);
}
.context-chip-remove {
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.65);
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
[data-theme="light"] .context-chip-remove {
color: rgba(0, 0, 0, 0.5);
}
.context-chip-remove:hover {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 1);
}
[data-theme="light"] .context-chip-remove:hover {
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.9);
}
.context-chip-remove .material-icons {
font-size: 10px;
}
/* Level 2: Unified Input Box - Vertical layout (上下结构) */
.command-level-2 {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-subtle);
border-radius: 10px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
overflow: visible;
position: relative;
padding: 12px;
min-height: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.command-level-2:hover {
border-color: var(--color-border-primary);
background: var(--color-bg-tertiary);
}
.command-level-2.focused {
border-color: var(--color-brand-primary);
background: var(--color-bg-primary);
box-shadow: 0 0 0 1px var(--color-brand-primary);
}
.command-level-2.drag-over {
background: var(--color-brand-primary-05);
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 1px var(--color-brand-primary);
}
/* Input box row layouts - Cursor style */
.input-textarea-row {
display: flex;
align-items: center;
width: 100%;
min-height: 32px;
}
.input-controls-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 8px;
}
.input-controls-row .spacer {
flex: 1;
}
.action-buttons-group {
display: flex;
align-items: center;
gap: 6px;
}
/* Level 3: Toolbar and Send Button - Clean layout */
.command-level-3 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
background: transparent;
border-radius: 0;
}
/* File manager dropdown positioning for Level 1 */
.file-manager-dropdown {
position: relative;
}
.file-manager-button {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 1px solid var(--color-border-primary);
border-radius: 4px;
background: var(--color-bg-secondary);
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.15s ease;
font-size: 12px;
font-weight: 500;
position: relative;
flex-shrink: 0;
}
.file-manager-button:hover:not(:disabled) {
background: var(--color-bg-tertiary);
border-color: var(--color-border-secondary);
}
.file-manager-button.active {
background: var(--color-brand-primary-bg);
border-color: var(--color-brand-primary);
color: var(--color-brand-primary);
}
.file-manager-button.open {
background: var(--color-bg-tertiary);
border-color: var(--color-border-secondary);
}
.file-manager-button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.at-symbol {
font-size: 14px;
font-weight: 600;
color: inherit;
line-height: 1;
}
/* Mode switch container - Cursor-style minimal */
.mode-switch-container {
position: relative;
display: inline-flex;
background: transparent;
border-radius: 6px;
padding: 0;
border: none;
}
/* Flip button styles - Removed, using new segmented control */
.btn-flip {
opacity: 1;
outline: 0;
color: var(--color-text-primary);
line-height: 28px;
position: relative;
text-align: center;
letter-spacing: 0.5px;
display: inline-block;
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
cursor: pointer;
border: none;
background: transparent;
transition: all 0.2s ease;
}
/* Hover effects */
.btn-flip:hover:before {
transform: translateY(0) rotateX(0) scale(1.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-flip:hover:after {
transform: translateY(-50%) rotateX(90deg) scale(1.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-flip.mode-edit:hover:before {
transform: translateY(50%) rotateX(90deg) scale(1.05);
}
.btn-flip.mode-edit:hover:after {
transform: translateY(0) rotateX(0) scale(1.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* ASK模式样式 */
.btn-flip.mode-ask:after {
opacity: 0;
transform: translateY(-50%) rotateX(90deg);
}
.btn-flip.mode-ask:before {
opacity: 1;
transform: translateY(0) rotateX(0);
}
/* EDIT模式样式 - 翻转显示 */
.btn-flip.mode-edit:after {
opacity: 1;
transform: translateY(0) rotateX(0);
}
.btn-flip.mode-edit:before {
opacity: 0;
transform: translateY(50%) rotateX(90deg);
}
.btn-flip:after {
top: 0;
left: 0;
opacity: 0;
width: 100%;
color: var(--color-text-primary);
display: block;
transition: 0.5s;
position: absolute;
background: var(--color-bg-tertiary);
content: attr(data-back);
transform: translateY(-50%) rotateX(90deg);
line-height: 32px;
padding: 0 16px;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
}
.btn-flip:before {
top: 0;
left: 0;
opacity: 1;
color: var(--color-text-secondary);
display: block;
padding: 0 16px;
line-height: 32px;
transition: 0.5s;
position: relative;
background: var(--color-bg-secondary);
content: attr(data-front);
transform: translateY(0) rotateX(0);
border-radius: 6px;
font-size: 10px;
font-weight: 600;
}
.mode-switch {
height: 32px;
min-width: 70px;
padding: 0 10px;
cursor: pointer;
transition: all 0.15s ease;
position: relative;
background: var(--color-bg-secondary);
color: var(--color-text-primary);
border-radius: 6px;
border: 1px solid var(--color-border-subtle);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: capitalize;
}
.mode-switch:hover {
background: var(--color-bg-tertiary);
border-color: var(--color-border-primary);
color: var(--color-text-primary);
}
.mode-switch.mode-ask,
.mode-switch.mode-plan,
.mode-switch.mode-agent {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
border-color: var(--color-border-subtle);
box-shadow: none;
}
.mode-switch.mode-ask:hover,
.mode-switch.mode-plan:hover,
.mode-switch.mode-agent:hover {
background: var(--color-bg-tertiary);
color: var(--color-text-primary);
border-color: var(--color-border-primary);
box-shadow: none;
}
/* CSV Mode Styling - use default colors */
.mode-switch.mode-csv {
cursor: default;
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
}
.mode-switch.mode-csv:hover {
transform: none;
background: var(--color-bg-tertiary);
}
/* Processing indicator */
.processing-indicator {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-brand-primary);
font-size: 12px;
font-weight: 500;
}
.processing-indicator .material-icons {
font-size: 14px;
}
/* Professional textarea styling - Full width with vertical layout */
.chat-textarea {
width: 100%;
background: transparent;
border: none;
outline: none;
resize: none;
font-size: 14px;
line-height: 1.6;
color: var(--color-text-primary);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
min-height: 28px !important;
padding: 6px 0 !important;
max-height: 200px;
scrollbar-width: thin;
scrollbar-color: var(--color-border-primary) transparent;
overflow-y: auto;
}
.chat-textarea::-webkit-scrollbar {
width: 6px;
}
.chat-textarea::-webkit-scrollbar-track {
background: transparent;
}
.chat-textarea::-webkit-scrollbar-thumb {
background: var(--color-border-primary);
border-radius: 3px;
}
.chat-textarea::-webkit-scrollbar-thumb:hover {
background: var(--color-border-strong);
}
.chat-textarea::-moz-placeholder {
color: var(--color-text-tertiary);
font-weight: 400;
}
.chat-textarea::placeholder {
color: var(--color-text-tertiary);
font-weight: 400;
}
.chat-textarea:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Mode dropdown container */
.mode-dropdown-container {
position: relative;
display: inline-block;
}
/* Inline mode switch (left side of input) */
.mode-switch-inline {
height: 32px;
padding: 0 8px;
background: transparent;
color: var(--color-text-secondary);
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.15s ease;
flex-shrink: 0;
white-space: nowrap;
}
.mode-switch-inline:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.mode-switch-inline .material-icons {
font-size: 16px;
opacity: 0.7;
}
/* Mode dropdown menu */
.mode-dropdown-menu {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 8px;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 280px;
padding: 6px;
z-index: 1000;
animation: dropdownSlideUp 0.2s ease-out;
}
@keyframes dropdownSlideUp {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mode dropdown item */
.mode-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
color: var(--color-text-primary);
}
.mode-dropdown-item:hover {
background: var(--color-bg-hover);
}
.mode-dropdown-item.active {
background: var(--color-brand-primary-10);
}
.mode-dropdown-item .material-icons {
color: var(--color-text-secondary);
flex-shrink: 0;
}
.mode-dropdown-item.active .material-icons:first-child {
color: var(--color-brand-primary);
}
/* Mode info section */
.mode-info {
flex: 1;
min-width: 0;
}
.mode-name {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.mode-description {
font-size: 11px;
color: var(--color-text-tertiary);
line-height: 1.4;
}
/* Action icon buttons (@ context, etc.) */
.action-icon-btn {
width: 32px;
height: 32px;
min-width: 32px;
padding: 0;
background: transparent;
color: var(--color-text-secondary);
border: none;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
flex-shrink: 0;
}
.action-icon-btn:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.action-icon-btn .material-icons {
font-size: 20px;
}
/* Send button inline (right side of input) */
.send-button-inline {
width: 32px;
height: 32px;
min-width: 32px;
padding: 0;
background: transparent;
color: var(--color-text-secondary);
border: none;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
flex-shrink: 0;
}
.send-button-inline:hover:not(:disabled) {
background: var(--color-bg-hover);
color: var(--color-brand-primary);
}
.send-button-inline:active:not(:disabled) {
transform: scale(0.95);
}
.send-button-inline:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.send-button-inline .material-icons {
font-size: 20px;
}
/* Toolbar sections */
.toolbar-left {
display: flex;
align-items: center;
gap: 8px;
}
.toolbar-right {
display: flex;
align-items: center;
gap: 8px;
}
/* Animation improvements */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px);
}
to { opacity: 1; transform: translateY(0);
}
}
/* Accessibility - Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Focus visible styles for keyboard navigation */
.chat-textarea:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
}
.mode-switch:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--color-brand-primary-10);
}
.send-button:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--color-brand-primary);
}
.file-chip-remove:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 1px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.command-bar-wrapper {
padding: 6px;
}
.command-input-container {
padding: 12px;
gap: 6px;
}
/* Responsive level-1 adjustments */
.command-level-1 {
gap: 4px;
padding: 4px 0;
}
.selected-file-chip {
max-width: min(150px, 35vw);
font-size: 10px;
height: 20px;
-webkit-backdrop-filter: blur(8px) saturate(110%);
backdrop-filter: blur(8px) saturate(110%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.selected-file-chip:hover {
-webkit-backdrop-filter: blur(8px) saturate(110%);
backdrop-filter: blur(8px) saturate(110%);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.current-document-chip {
max-width: min(180px, 45vw) !important;
-webkit-backdrop-filter: blur(8px) saturate(110%) !important;
backdrop-filter: blur(8px) saturate(110%) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
.current-document-chip:hover {
-webkit-backdrop-filter: blur(8px) saturate(110%) !important;
backdrop-filter: blur(8px) saturate(110%) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}
.selected-content-chip {
max-width: min(250px, 55vw);
font-size: 10px;
height: 20px;
-webkit-backdrop-filter: blur(8px) saturate(110%);
backdrop-filter: blur(8px) saturate(110%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.selected-content-chip:hover {
-webkit-backdrop-filter: blur(8px) saturate(110%);
backdrop-filter: blur(8px) saturate(110%);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.additional-context-chip {
-webkit-backdrop-filter: blur(8px) saturate(110%);
backdrop-filter: blur(8px) saturate(110%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.additional-context-chip:hover {
-webkit-backdrop-filter: blur(8px) saturate(110%);
backdrop-filter: blur(8px) saturate(110%);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.file-chip-name,
.content-chip-text {
font-size: 9px;
}
.send-button {
width: 28px;
height: 28px;
}
.send-button .material-icons {
font-size: 18px;
}
}
/* Extra small screens */
@media (max-width: 480px) {
.command-level-1 {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.file-manager-dropdown {
align-self: flex-start;
}
.unified-tags-display {
width: 100%;
justify-content: flex-start;
}
.selected-file-chip {
max-width: 100%;
-webkit-backdrop-filter: blur(6px) saturate(110%);
backdrop-filter: blur(6px) saturate(110%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.selected-file-chip:hover {
-webkit-backdrop-filter: blur(6px) saturate(110%);
backdrop-filter: blur(6px) saturate(110%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.current-document-chip {
max-width: 100% !important;
-webkit-backdrop-filter: blur(6px) saturate(110%) !important;
backdrop-filter: blur(6px) saturate(110%) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
.current-document-chip:hover {
-webkit-backdrop-filter: blur(6px) saturate(110%) !important;
backdrop-filter: blur(6px) saturate(110%) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.selected-content-chip {
max-width: 100%;
-webkit-backdrop-filter: blur(6px) saturate(110%);
backdrop-filter: blur(6px) saturate(110%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.selected-content-chip:hover {
-webkit-backdrop-filter: blur(6px) saturate(110%);
backdrop-filter: blur(6px) saturate(110%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.file-chip-name,
.content-chip-text {
font-size: 8px;
}
.additional-context-chip {
max-width: 100%;
-webkit-backdrop-filter: blur(6px) saturate(110%);
backdrop-filter: blur(6px) saturate(110%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.additional-context-chip:hover {
-webkit-backdrop-filter: blur(6px) saturate(110%);
backdrop-filter: blur(6px) saturate(110%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.context-chip-text {
font-size: 8px;
}
}
/* File explorer dropdown portal */
.file-explorer-dropdown-portal[data-v-689f93b1] {
width: 320px;
max-width: 90vw;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
z-index: 9999;
animation: dropdownFadeInUp-689f93b1 0.15s ease-out;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.explorer-header[data-v-689f93b1] {
padding: 8px;
background: var(--color-bg-tertiary);
border-bottom: 1px solid var(--color-border-primary);
}
.explorer-search[data-v-689f93b1] {
display: flex;
align-items: center;
gap: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
padding: 4px 8px;
transition: background-color 0.2s ease;
}
.explorer-search[data-v-689f93b1]:hover {
background: var(--color-bg-hover);
}
.search-icon[data-v-689f93b1] {
font-size: 16px;
color: var(--color-text-secondary);
}
.explorer-search-input[data-v-689f93b1] {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--color-text-primary);
font-size: 13px;
font-family: inherit;
cursor: pointer;
}
.explorer-search-input[data-v-689f93b1]::-moz-placeholder {
color: var(--color-text-secondary);
}
.explorer-search-input[data-v-689f93b1]::placeholder {
color: var(--color-text-secondary);
}
.explorer-content[data-v-689f93b1] {
max-height: 300px;
overflow-y: auto;
background: var(--color-bg-tertiary);
}
.explorer-empty[data-v-689f93b1] {
padding: 40px 20px;
text-align: center;
}
.empty-state[data-v-689f93b1] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.empty-icon[data-v-689f93b1] {
font-size: 48px;
color: var(--color-text-tertiary);
opacity: 0.8;
}
.empty-text[data-v-689f93b1] {
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 8px;
}
.add-files-btn[data-v-689f93b1] {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid var(--color-border-primary);
border-radius: 3px;
background: var(--color-bg-secondary);
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
font-family: inherit;
}
.add-files-btn[data-v-689f93b1]:hover {
background: var(--color-bg-hover);
border-color: var(--color-border-secondary);
}
.add-files-btn[data-v-689f93b1]:disabled,
.add-files-btn.uploading[data-v-689f93b1] {
opacity: 0.6;
cursor: not-allowed;
}
.add-files-btn .material-icons[data-v-689f93b1] {
font-size: 16px;
}
.file-tree[data-v-689f93b1] {
padding: 4px 0;
}
.file-tree-item[data-v-689f93b1] {
display: flex;
align-items: center;
padding: 0;
transition: background-color 0.1s ease;
cursor: pointer;
}
.file-tree-item[data-v-689f93b1]:hover {
background: rgba(255, 255, 255, 0.04);
}
.file-item-content[data-v-689f93b1] {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
width: 100%;
min-height: 22px;
}
.file-type-icon[data-v-689f93b1] {
font-size: 16px;
color: var(--color-text-primary);
flex-shrink: 0;
opacity: 0.8;
}
.file-item-name[data-v-689f93b1] {
flex: 1;
font-size: 13px;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
line-height: 1.4;
}
.explorer-footer[data-v-689f93b1] {
display: flex;
gap: 8px;
padding: 8px;
background: var(--color-bg-secondary);
border-top: 1px solid var(--color-border-primary);
}
.footer-btn[data-v-689f93b1] {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
border: 1px solid var(--color-border-primary);
border-radius: 3px;
background: var(--color-bg-tertiary);
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.15s ease;
font-size: 11px;
font-weight: 400;
flex: 1;
justify-content: center;
font-family: inherit;
}
.footer-btn[data-v-689f93b1]:hover {
background: var(--color-bg-hover);
border-color: var(--color-border-secondary);
}
.add-more-btn .material-icons[data-v-689f93b1] {
font-size: 14px;
}
.add-files-header-btn[data-v-689f93b1] {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
border-radius: 3px;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
}
.add-files-header-btn[data-v-689f93b1]:hover {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.add-files-header-btn[data-v-689f93b1]:disabled,
.add-files-header-btn.uploading[data-v-689f93b1] {
opacity: 0.6;
cursor: not-allowed;
}
.add-files-header-btn .material-icons[data-v-689f93b1] {
font-size: 16px;
}
.clear-search-btn[data-v-689f93b1] {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
border: 1px solid var(--color-border-primary);
border-radius: 3px;
background: var(--color-bg-secondary);
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
font-family: inherit;
}
.clear-search-btn[data-v-689f93b1]:hover {
background: var(--color-bg-hover);
border-color: var(--color-border-secondary);
}
.clear-search-btn .material-icons[data-v-689f93b1] {
font-size: 14px;
}
.file-checkbox[data-v-689f93b1] {
width: 16px;
height: 16px;
accent-color: var(--color-brand-primary);
cursor: pointer;
}
.file-info[data-v-689f93b1] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.file-type-label[data-v-689f93b1] {
font-size: 11px;
color: var(--color-text-secondary);
line-height: 1;
}
.explorer-loading[data-v-689f93b1] {
padding: 40px 20px;
text-align: center;
}
.loading-state[data-v-689f93b1] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.loading-icon[data-v-689f93b1] {
font-size: 24px;
color: var(--color-brand-primary);
}
.loading-text[data-v-689f93b1] {
font-size: 13px;
color: var(--color-text-secondary);
}
.footer-info[data-v-689f93b1] {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
}
.selected-count[data-v-689f93b1] {
font-size: 12px;
color: var(--color-text-primary);
font-weight: 500;
}
.clear-selection-btn[data-v-689f93b1] {
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
font-size: 11px;
padding: 4px 8px;
border-radius: 3px;
transition: all 0.15s ease;
}
.clear-selection-btn[data-v-689f93b1]:hover {
color: var(--color-status-error);
background: var(--color-status-error-bg);
}
@keyframes dropdownFadeInUp-689f93b1 {
from {
opacity: 0;
transform: translateY(2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin-689f93b1 {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
.animate-spin[data-v-689f93b1] {
animation: spin-689f93b1 1s linear infinite;
}
.tab-button[data-v-432d5f9b] {
position: relative;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tab-button .material-icons[data-v-432d5f9b] {
flex-shrink: 0;
}
.count-badge[data-v-432d5f9b] {
opacity: 0.7;
}
.action-button[data-v-432d5f9b] {
color: var(--color-text-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.action-button[data-v-432d5f9b]:hover {
color: var(--color-text-primary);
}
.action-button .material-icons[data-v-432d5f9b] {
font-size: 20px;
}
.diff-viewer-modal[data-v-15cbb591] {
animation: slideUp-15cbb591 0.2s ease-out;
}
@keyframes slideUp-15cbb591 {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.diff-line[data-v-15cbb591] {
min-height: 20px;
line-height: 1.5;
align-items: flex-start;
}
.added-line[data-v-15cbb591] {
background-color: rgba(34, 197, 94, 0.1);
border-left: 3px solid rgb(34, 197, 94);
}
.removed-line[data-v-15cbb591] {
background-color: rgba(239, 68, 68, 0.1);
border-left: 3px solid rgb(239, 68, 68);
}
.context-line[data-v-15cbb591] {
background-color: transparent;
}
.header-line[data-v-15cbb591] {
background-color: rgba(59, 130, 246, 0.1);
color: rgb(59, 130, 246);
font-weight: 600;
border-left: 3px solid rgb(59, 130, 246);
}
.line-number[data-v-15cbb591] {
min-width: 50px;
flex-shrink: 0;
text-align: right;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding-top: 2px;
}
.line-content[data-v-15cbb591] {
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
flex: 1;
min-width: 0;
}
/* Modal Transitions */
.modal-enter-active[data-v-eee2b328],
.modal-leave-active[data-v-eee2b328] {
transition: opacity 0.2s ease;
}
.modal-enter-from[data-v-eee2b328],
.modal-leave-to[data-v-eee2b328] {
opacity: 0;
}
/* Custom Scrollbar */
.custom-scrollbar[data-v-eee2b328]::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar[data-v-eee2b328]::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: 4px;
}
.custom-scrollbar[data-v-eee2b328]::-webkit-scrollbar-thumb {
background: var(--border-primary);
border-radius: 4px;
}
.custom-scrollbar[data-v-eee2b328]::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
/* Edit Type Badge Colors */
.bg-badge-blue-bg[data-v-eee2b328] {
background-color: rgba(59, 130, 246, 0.1);
}
.text-badge-blue[data-v-eee2b328] {
color: rgb(59, 130, 246);
}
.bg-badge-purple-bg[data-v-eee2b328] {
background-color: rgba(168, 85, 247, 0.1);
}
.text-badge-purple[data-v-eee2b328] {
color: rgb(168, 85, 247);
}
.bg-badge-green-bg[data-v-eee2b328] {
background-color: rgba(34, 197, 94, 0.1);
}
.text-badge-green[data-v-eee2b328] {
color: rgb(34, 197, 94);
}
.bg-badge-orange-bg[data-v-eee2b328] {
background-color: rgba(249, 115, 22, 0.1);
}
.text-badge-orange[data-v-eee2b328] {
color: rgb(249, 115, 22);
}
.bg-badge-gray-bg[data-v-eee2b328] {
background-color: rgba(156, 163, 175, 0.1);
}
.text-badge-gray[data-v-eee2b328] {
color: rgb(156, 163, 175);
}
/* Container query for responsive layout */
.file-version-history-list[data-v-11b416e5] {
container-type: inline-size;
container-name: version-sidebar;
}
/* Custom Scrollbar */
.custom-scrollbar[data-v-11b416e5]::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar[data-v-11b416e5]::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
}
.custom-scrollbar[data-v-11b416e5]::-webkit-scrollbar-thumb {
background: var(--color-border-primary);
border-radius: 3px;
}
.custom-scrollbar[data-v-11b416e5]::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
/* Timeline Container */
.timeline-container[data-v-11b416e5] {
position: relative;
}
/* Timeline Item */
.timeline-item[data-v-11b416e5] {
position: relative;
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
margin-bottom: 20px;
}
.timeline-item.last-item .timeline-line[data-v-11b416e5] {
display: none;
}
/* Timeline Marker */
.timeline-marker[data-v-11b416e5] {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
/* Timeline Dot */
.timeline-dot[data-v-11b416e5] {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-primary);
border: 2px solid;
flex-shrink: 0;
z-index: 1;
transition: all 0.2s ease;
}
.timeline-dot .material-icons[data-v-11b416e5] {
font-size: 16px;
}
.dot-blue[data-v-11b416e5] {
border-color: rgb(59, 130, 246);
color: rgb(59, 130, 246);
background: rgba(59, 130, 246, 0.1);
}
.dot-purple[data-v-11b416e5] {
border-color: rgb(168, 85, 247);
color: rgb(168, 85, 247);
background: rgba(168, 85, 247, 0.1);
}
.dot-green[data-v-11b416e5] {
border-color: rgb(34, 197, 94);
color: rgb(34, 197, 94);
background: rgba(34, 197, 94, 0.1);
}
.dot-orange[data-v-11b416e5] {
border-color: rgb(249, 115, 22);
color: rgb(249, 115, 22);
background: rgba(249, 115, 22, 0.1);
}
.dot-gray[data-v-11b416e5] {
border-color: rgb(156, 163, 175);
color: rgb(156, 163, 175);
background: rgba(156, 163, 175, 0.1);
}
/* Timeline Line */
.timeline-line[data-v-11b416e5] {
position: absolute;
top: 32px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: calc(100% + 20px);
background: var(--color-border-primary);
}
/* Version Card */
.version-card[data-v-11b416e5] {
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.version-card[data-v-11b416e5]:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Edit type badges */
.badge-blue[data-v-11b416e5] {
background-color: rgba(59, 130, 246, 0.15);
color: rgb(59, 130, 246);
border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-purple[data-v-11b416e5] {
background-color: rgba(168, 85, 247, 0.15);
color: rgb(168, 85, 247);
border: 1px solid rgba(168, 85, 247, 0.3);
}
.badge-green[data-v-11b416e5] {
background-color: rgba(34, 197, 94, 0.15);
color: rgb(34, 197, 94);
border: 1px solid rgba(34, 197, 94, 0.3);
}
.badge-orange[data-v-11b416e5] {
background-color: rgba(249, 115, 22, 0.15);
color: rgb(249, 115, 22);
border: 1px solid rgba(249, 115, 22, 0.3);
}
.badge-gray[data-v-11b416e5] {
background-color: rgba(156, 163, 175, 0.15);
color: rgb(156, 163, 175);
border: 1px solid rgba(156, 163, 175, 0.3);
}
/* Quick Action Buttons */
.quick-action-btn[data-v-11b416e5] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 4px;
background: transparent;
border: 1px solid var(--color-border-primary);
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
}
.quick-action-btn .material-icons[data-v-11b416e5] {
font-size: 16px;
}
.quick-action-btn[data-v-11b416e5]:hover {
background: var(--color-bg-hover);
border-color: var(--color-border-strong);
color: var(--color-text-primary);
}
.quick-action-btn.active[data-v-11b416e5] {
background: var(--color-brand-primary);
border-color: var(--color-brand-primary);
color: white;
}
.quick-action-btn.success[data-v-11b416e5] {
border-color: rgba(34, 197, 94, 0.3);
color: rgb(34, 197, 94);
}
.quick-action-btn.success[data-v-11b416e5]:hover {
background: rgba(34, 197, 94, 0.1);
border-color: rgb(34, 197, 94);
}
.quick-action-btn.primary[data-v-11b416e5] {
border-color: rgba(59, 130, 246, 0.3);
color: rgb(59, 130, 246);
}
.quick-action-btn.primary[data-v-11b416e5]:hover {
background: rgba(59, 130, 246, 0.1);
border-color: rgb(59, 130, 246);
}
/* Line clamp utility */
.line-clamp-2[data-v-11b416e5] {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Accessibility - Focus visible styles */
.quick-action-btn[data-v-11b416e5]:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.timeline-dot[data-v-11b416e5] {
border-width: 3px;
}
.version-card[data-v-11b416e5] {
border-width: 2px;
}
.quick-action-btn[data-v-11b416e5] {
border-width: 2px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.version-card[data-v-11b416e5],
.quick-action-btn[data-v-11b416e5],
.timeline-dot[data-v-11b416e5] {
transition: none;
}
}
/* Diff viewer styles */
.diff-line[data-v-11b416e5] {
min-height: 18px;
line-height: 1.5;
}
.added-line[data-v-11b416e5] {
background-color: rgba(34, 197, 94, 0.1);
border-left: 2px solid rgb(34, 197, 94);
}
.removed-line[data-v-11b416e5] {
background-color: rgba(239, 68, 68, 0.1);
border-left: 2px solid rgb(239, 68, 68);
}
.context-line[data-v-11b416e5] {
background-color: transparent;
}
.header-line[data-v-11b416e5] {
background-color: rgba(59, 130, 246, 0.08);
color: rgb(59, 130, 246);
font-weight: 600;
border-left: 2px solid rgb(59, 130, 246);
}
.line-number[data-v-11b416e5] {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-size: 11px;
}
.line-content[data-v-11b416e5] {
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
}
/* Main chat panel container - ensures 100% height */
.chat-panel-container[data-v-22ecc9f7] {
position: relative;
overflow: hidden;
height: 100%; /* Use 100% instead of 100vh to fit parent container */
min-height: 0; /* Allow flex children to shrink */
background: var(--color-bg-primary) !important; /* 强制统一背景色 */
border-left: 1px solid var(--color-border-subtle);
}
/* Resize handle styles */
.resize-handle[data-v-22ecc9f7] {
/* Expand the hover area for better UX */
padding-left: 2px;
margin-left: -2px;
}
.resize-handle[data-v-22ecc9f7]:hover {
background: linear-gradient(to right,
rgba(var(--color-brand-primary), 0.15) 0%,
rgba(var(--color-brand-primary), 0.05) 50%,
transparent 100%
);
}
.resize-handle[data-v-22ecc9f7]:active {
background: linear-gradient(to right,
rgba(var(--color-brand-primary), 0.25) 0%,
rgba(var(--color-brand-primary), 0.10) 50%,
transparent 100%
);
}
/* Visual indicator for resize handle */
.resize-handle > div[data-v-22ecc9f7] {
transition: all 0.2s ease;
background: var(--color-bg-hover);
}
.resize-handle:hover > div[data-v-22ecc9f7] {
background: var(--color-brand-primary);
height: 2rem;
}
.resize-handle:active > div[data-v-22ecc9f7] {
background: var(--color-brand-primary);
height: 3rem;
opacity: 0.8;
}
/* Prevent text selection during resize */
.chat-panel-container.resizing[data-v-22ecc9f7] {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Disable transitions during resize for immediate response */
.chat-panel-container.no-transition[data-v-22ecc9f7] {
transition: none !important;
}
/* Add a subtle shadow when resizing */
.chat-panel-container.resizing[data-v-22ecc9f7] {
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
}
/* 移除顶部装饰线条以实现与 ChatHeader 完全融合 */
.chat-panel-container[data-v-22ecc9f7]::before {
display: none;
}
/* Ensure MessageContainer scrolls properly */
[data-v-22ecc9f7] .message-container {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
background: var(--color-bg-primary) !important; /* 强制统一背景色 */
border-radius: 0;
/* 移除任何可能的边框 */
border: none !important;
border-top: none !important;
}
/* Messages container styling */
[data-v-22ecc9f7] .messages-container {
background: var(--color-bg-primary) !important; /* 强制统一背景色 */
border-radius: 0;
}
/* Ensure proper layout for all child components */
[data-v-22ecc9f7] .chat-header {
flex-shrink: 0;
/* 移除任何可能的边框 */
border: none !important;
border-bottom: none !important;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.chat-panel-container[data-v-22ecc9f7] {
min-width: 280px;
}
}
/* Embedded variant: full-width, non-resizable header-style panel */
.chat-panel-container.embedded-panel[data-v-22ecc9f7] {
/* Let the parent flex layout decide the width */
min-width: 0 !important;
max-width: none !important;
flex: 0 0 auto;
border-bottom: 1px solid var(--color-border-primary);
height: 100%;
}
.chat-panel-container.embedded-panel .resize-handle[data-v-22ecc9f7] {
display: none;
}
/* Version History Popup Styles */
.version-history-popup-overlay[data-v-22ecc9f7] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: overlayFadeIn-22ecc9f7 0.2s ease-out;
}
@keyframes overlayFadeIn-22ecc9f7 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.version-history-popup[data-v-22ecc9f7] {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow: hidden;
display: flex;
flex-direction: column;
animation: popupSlideIn-22ecc9f7 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popupSlideIn-22ecc9f7 {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Ensure FileVersionHistoryList fills the popup */
.version-history-popup[data-v-22ecc9f7] .file-version-history-list {
height: 100%;
max-height: none;
}
.workbench-sidebar[data-v-b452cc73] {
position: relative;
}
.custom-scrollbar[data-v-b452cc73]::-webkit-scrollbar {
width: 4px;
}
.custom-scrollbar[data-v-b452cc73]::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar[data-v-b452cc73]::-webkit-scrollbar-thumb {
background: var(--color-border-primary);
border-radius: 2px;
}
.custom-scrollbar[data-v-b452cc73]::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
/* Unified button styles */
.icon-btn[data-v-b452cc73] {
display: flex;
height: 1.75rem;
width: 1.75rem;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
color: var(--color-text-tertiary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.icon-btn[data-v-b452cc73]:hover {
background-color: var(--color-bg-secondary);
color: var(--text-primary);
}
.icon-btn-sm[data-v-b452cc73] {
display: flex;
height: 1.5rem;
width: 1.5rem;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
color: var(--color-text-tertiary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.icon-btn-sm[data-v-b452cc73]:hover {
background-color: var(--color-bg-secondary);
color: var(--text-primary);
}
.icon-btn-xs[data-v-b452cc73] {
display: flex;
height: 1.25rem;
width: 1.25rem;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
color: var(--color-text-tertiary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.icon-btn-xs[data-v-b452cc73]:hover {
background-color: var(--color-bg-tertiary);
color: var(--text-primary);
}
.doc-item[data-v-b452cc73] {
display: flex;
width: 100%;
align-items: center;
gap: 0.5rem;
border-radius: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
color: var(--text-primary);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.doc-item[data-v-b452cc73]:hover {
background-color: var(--color-bg-secondary);
}
.doc-item.active[data-v-b452cc73] {
background-color: var(--color-bg-secondary);
}
.menu-dropdown[data-v-b452cc73] {
position: absolute;
z-index: 50;
margin-top: 0.25rem;
width: 8rem;
transform-origin: top right;
border-radius: 0.375rem;
border-width: 1px;
border-color: var(--color-border-primary);
background-color: var(--color-bg-primary);
padding-top: 0.25rem;
padding-bottom: 0.25rem;
--tw-shadow: var(--shadow-lg);
--tw-shadow-colored: var(--shadow-lg);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.menu-dropdown[data-v-b452cc73]:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.menu-item[data-v-b452cc73] {
display: flex;
width: 100%;
align-items: center;
gap: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
/* Bubble Menu Glass Morphism Design */
.bubble-menu[data-v-46ce870e] {
animation: fadeInUp-46ce870e 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(var(--color-bg-tertiary-rgb, 30, 30, 30), 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.4),
0 10px 10px -5px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: visible;
white-space: nowrap;
width: -moz-max-content;
width: max-content;
max-width: none;
z-index: 9999 !important; /* Force above all other elements including table handles */
}
/* Content Container */
.bubble-menu-content[data-v-46ce870e] {
padding: 10px;
display: flex;
align-items: center;
gap: 8px;
width: -moz-max-content;
width: max-content;
flex-shrink: 0;
}
/* Button Groups */
.button-group[data-v-46ce870e] {
display: flex;
align-items: center;
flex-shrink: 0;
}
.button-set[data-v-46ce870e] {
display: flex;
align-items: center;
gap: 2px;
padding: 2px;
background: rgba(255, 255, 255, 0.03);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.05);
flex-shrink: 0;
}
/* Separators */
.separator[data-v-46ce870e] {
width: 1px;
height: 24px;
margin: 0 6px;
flex-shrink: 0;
}
/* Light mode separator */
:root[data-theme="light"] .separator[data-v-46ce870e] {
background: linear-gradient(
to bottom,
transparent,
rgba(0, 0, 0, 0.15) 20%,
rgba(0, 0, 0, 0.15) 80%,
transparent
);
}
/* Dark mode separator */
:root[data-theme="dark"] .separator[data-v-46ce870e] {
background: linear-gradient(
to bottom,
transparent,
rgba(255, 255, 255, 0.15) 20%,
rgba(255, 255, 255, 0.15) 80%,
transparent
);
}
/* Base Button Styles */
.menu-button[data-v-46ce870e] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-family: inherit;
color: rgb(var(--color-text-primary));
border-radius: 4px;
border: 1px solid transparent;
flex-shrink: 0;
}
.menu-button[data-v-46ce870e]:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-brand-primary);
}
/* Icon-only buttons */
.menu-button.icon-only[data-v-46ce870e] {
width: 28px;
height: 28px;
padding: 0;
min-width: 28px;
max-width: 28px;
}
/* Icon-only compact buttons (for dropdowns) */
.menu-button.icon-only-compact[data-v-46ce870e] {
width: 28px;
height: 28px;
padding: 0;
min-width: 28px;
max-width: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-button.icon-only-compact[data-v-46ce870e]:hover:not(:disabled) {
background: var(--color-brand-primary-10);
border-color: var(--color-brand-primary-20);
color: var(--color-brand-primary);
transform: translateY(-1px);
box-shadow: 0 2px 4px var(--color-brand-primary-15);
}
.menu-button.icon-only-compact[data-v-46ce870e]:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 1px 2px var(--color-brand-primary);
}
.menu-button.icon-only[data-v-46ce870e]:hover:not(:disabled) {
background: var(--color-brand-primary-10);
border-color: var(--color-brand-primary-20);
color: var(--color-brand-primary);
transform: translateY(-1px);
box-shadow: 0 2px 4px var(--color-brand-primary-15);
}
.menu-button.icon-only[data-v-46ce870e]:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 1px 2px var(--color-brand-primary);
}
/* Text buttons (for headings) */
.menu-button.text-button[data-v-46ce870e] {
width: 28px;
height: 28px;
padding: 0;
min-width: 28px;
max-width: 28px;
}
.menu-button.text-button[data-v-46ce870e]:hover:not(:disabled) {
background: var(--color-brand-primary-10);
border-color: var(--color-brand-primary-20);
color: var(--color-brand-primary);
transform: translateY(-1px);
box-shadow: 0 2px 4px var(--color-brand-primary-15);
}
.heading-text[data-v-46ce870e] {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1;
}
/* Active state */
.menu-button.is-active[data-v-46ce870e] {
background: var(--color-brand-primary-15);
border-color: var(--color-brand-primary-30);
color: var(--color-brand-primary);
box-shadow: 0 0 0 1px var(--color-brand-primary-20);
}
.menu-button.is-active[data-v-46ce870e]:hover:not(:disabled) {
background: var(--color-brand-primary-20);
border-color: var(--color-brand-primary-40);
}
/* Disabled state */
.menu-button[data-v-46ce870e]:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Material Icons */
.material-icons-outlined[data-v-46ce870e] {
font-family: 'Material Icons Outlined', 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-shrink: 0;
}
/* Quick Edit Button Styles */
.quick-edit-button[data-v-46ce870e] {
position: relative;
background: transparent !important;
border: 1px solid transparent !important;
box-shadow: none !important;
}
.quick-edit-button[data-v-46ce870e]:hover:not(:disabled) {
background: var(--color-bg-hover) !important;
border-color: transparent !important;
box-shadow: none !important;
transform: translateY(-1px) !important;
}
.quick-edit-button .material-icons-outlined[data-v-46ce870e] {
color: var(--color-brand-primary) !important; /* Emerald green for Quick Edit */
filter: none !important;
text-shadow: none !important;
}
.quick-edit-button:disabled .material-icons-outlined[data-v-46ce870e] {
animation: spin-46ce870e 1s linear infinite;
}
/* Quick Edit Composer */
.quick-edit-composer[data-v-46ce870e] {
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 320px;
max-width: 360px;
background: var(--color-bg-tertiary, rgba(22, 22, 36, 0.96));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow:
0 18px 30px -14px rgba(0, 0, 0, 0.6),
0 10px 20px -12px rgba(0, 0, 0, 0.45);
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 70; /* Higher than bubble menu to appear above it */
color: rgb(var(--color-text-primary));
}
.composer-header[data-v-46ce870e] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.composer-title[data-v-46ce870e] {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: rgba(var(--color-text-primary), 0.7);
}
.composer-close[data-v-46ce870e] {
width: 28px;
height: 28px;
border-radius: 9999px;
border: none;
background: transparent;
color: rgba(var(--color-text-primary), 0.6);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
}
.composer-close[data-v-46ce870e]:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.06);
color: rgb(var(--color-text-primary));
}
.composer-close[data-v-46ce870e]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.composer-body[data-v-46ce870e] {
position: relative;
}
.composer-loading-overlay[data-v-46ce870e] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 10;
}
.loading-spinner[data-v-46ce870e] {
width: 24px;
height: 24px;
border: 3px solid var(--color-brand-primary-20);
border-top-color: var(--color-brand-primary);
border-radius: 50%;
animation: spin-46ce870e 0.8s linear infinite;
}
.loading-text[data-v-46ce870e] {
font-size: 12px;
color: rgba(var(--color-text-primary), 0.9);
font-weight: 500;
}
.composer-input[data-v-46ce870e] {
width: 100%;
min-height: 78px;
resize: vertical;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
font-size: 13px;
line-height: 1.45;
color: rgb(var(--color-text-primary));
transition: all 0.15s ease;
}
.composer-input[data-v-46ce870e]:focus {
outline: none;
border-color: var(--color-brand-primary-30);
box-shadow: 0 0 0 1px var(--color-brand-primary-20);
background: rgba(255, 255, 255, 0.06);
}
.composer-input[data-v-46ce870e]::-moz-placeholder {
color: rgba(var(--color-text-primary), 0.4);
}
.composer-input[data-v-46ce870e]::placeholder {
color: rgba(var(--color-text-primary), 0.4);
}
.composer-input[data-v-46ce870e]:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.composer-presets-dropdown[data-v-46ce870e] {
position: relative;
width: 100%;
}
.dropdown-trigger[data-v-46ce870e] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.05);
color: rgba(var(--color-text-primary), 0.75);
font-size: 12px;
line-height: 1.4;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.dropdown-trigger .material-icons-outlined[data-v-46ce870e] {
flex-shrink: 0;
font-size: 16px;
color: rgb(var(--color-brand-primary-rgb) / 0.85);
}
.dropdown-trigger-text[data-v-46ce870e] {
flex: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropdown-arrow[data-v-46ce870e] {
flex-shrink: 0;
color: rgba(var(--color-text-primary), 0.5) !important;
}
.dropdown-trigger[data-v-46ce870e]:hover:not(:disabled) {
border-color: var(--color-brand-primary-30);
background: var(--color-brand-primary-10);
color: rgb(var(--color-text-primary));
}
.dropdown-trigger:hover:not(:disabled) .material-icons-outlined[data-v-46ce870e]:first-child {
color: var(--color-brand-primary);
}
.dropdown-trigger[data-v-46ce870e]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.presets-dropdown-menu[data-v-46ce870e] {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
max-height: 240px;
overflow-y: auto;
background: rgb(22, 22, 36); /* Opaque background to prevent seeing through to table selection */
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow:
0 18px 30px -14px rgba(0, 0, 0, 0.6),
0 10px 20px -12px rgba(0, 0, 0, 0.45);
padding: 6px;
z-index: 10000; /* Higher than table cell selection (9999) and bubble menu base (9999) */
animation: dropdownFadeIn-46ce870e 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-item[data-v-46ce870e] {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
border: none;
background: transparent;
color: rgba(var(--color-text-primary), 0.75);
font-size: 12px;
line-height: 1.4;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
text-align: left;
}
.dropdown-item .material-icons-outlined[data-v-46ce870e] {
flex-shrink: 0;
font-size: 16px;
color: rgb(var(--color-brand-primary-rgb) / 0.85);
}
.dropdown-item[data-v-46ce870e]:hover:not(:disabled),
.dropdown-item.is-active[data-v-46ce870e] {
background: var(--color-brand-primary-10);
color: rgb(var(--color-text-primary));
}
.dropdown-item.is-active .material-icons-outlined[data-v-46ce870e],
.dropdown-item:hover:not(:disabled) .material-icons-outlined[data-v-46ce870e] {
color: var(--color-brand-primary);
}
.dropdown-item[data-v-46ce870e]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Custom scrollbar for dropdown */
.presets-dropdown-menu[data-v-46ce870e]::-webkit-scrollbar {
width: 6px;
}
.presets-dropdown-menu[data-v-46ce870e]::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.03);
border-radius: 3px;
}
.presets-dropdown-menu[data-v-46ce870e]::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
}
.presets-dropdown-menu[data-v-46ce870e]::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
}
@keyframes dropdownFadeIn-46ce870e {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.composer-footer[data-v-46ce870e] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.composer-hint[data-v-46ce870e] {
font-size: 11px;
color: rgba(var(--color-text-primary), 0.55);
}
.composer-submit[data-v-46ce870e] {
width: 32px;
height: 32px;
border-radius: 9999px;
border: none;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
color: rgba(6, 35, 25, 0.95);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.composer-submit[data-v-46ce870e]:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 16px -8px var(--color-brand-primary-60);
}
.composer-submit[data-v-46ce870e]:disabled {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
}
/* AI Button Special Styling */
.ai-button[data-v-46ce870e] {
background: transparent !important;
border: 1px solid transparent !important;
box-shadow: none !important;
position: relative;
overflow: visible;
}
.ai-button[data-v-46ce870e]:hover:not(:disabled) {
background: var(--color-bg-hover) !important;
border-color: transparent !important;
box-shadow: none !important;
transform: translateY(-1px) !important;
}
.ai-button .material-icons-outlined[data-v-46ce870e] {
color: var(--color-brand-primary) !important; /* Emerald for AI */
filter: none !important;
text-shadow: none !important;
}
/* Edit mode active state */
.ai-button.edit-mode-active[data-v-46ce870e] {
background: rgba(139, 92, 246, 0.1) !important;
border: 1px solid transparent !important;
box-shadow: none !important;
}
.ai-button.edit-mode-active[data-v-46ce870e]:hover:not(:disabled) {
background: rgba(139, 92, 246, 0.2) !important;
border-color: transparent !important;
box-shadow: none !important;
}
.ai-button.edit-mode-active .material-icons-outlined[data-v-46ce870e] {
color: var(--color-brand-primary) !important;
filter: none !important;
}
/* Edit mode indicator */
.edit-mode-indicator[data-v-46ce870e] {
position: absolute;
top: -6px;
right: -8px;
background: var(--color-error);
color: var(--text-primary);
font-size: 8px;
font-weight: 700;
padding: 1px 3px;
border-radius: 3px;
letter-spacing: 0.5px;
border: 1px solid rgba(255, 255, 255, 0.3);
animation: editPulse-46ce870e 2s ease-in-out infinite;
z-index: 10;
}
@keyframes editPulse-46ce870e {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(0.95);
}
}
/* Animation keyframes */
@keyframes fadeInUp-46ce870e {
from {
opacity: 0;
transform: translateY(8px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes spin-46ce870e {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.bubble-menu-content[data-v-46ce870e] {
padding: 8px;
gap: 6px;
}
.button-set[data-v-46ce870e] {
gap: 1px;
padding: 1px;
}
.menu-button.icon-only[data-v-46ce870e],
.menu-button.text-button[data-v-46ce870e] {
width: 24px;
height: 24px;
min-width: 24px;
max-width: 24px;
}
.material-icons-outlined[data-v-46ce870e] {
font-size: 16px;
}
.heading-text[data-v-46ce870e] {
font-size: 9px;
}
.separator[data-v-46ce870e] {
height: 28px;
margin: 0 3px;
}
.quick-edit-composer[data-v-46ce870e] {
width: min(280px, 80vw);
padding: 12px;
gap: 10px;
}
.dropdown-trigger[data-v-46ce870e] {
padding: 7px 10px;
font-size: 11px;
}
.dropdown-item[data-v-46ce870e] {
padding: 7px 9px;
font-size: 11px;
}
.composer-hint[data-v-46ce870e] {
font-size: 10px;
}
}
@media (max-width: 480px) {
.bubble-menu[data-v-46ce870e] {
max-width: 95vw;
}
.bubble-menu-content[data-v-46ce870e] {
flex-wrap: wrap;
justify-content: center;
padding: 6px;
gap: 4px;
}
.separator[data-v-46ce870e] {
display: none;
}
.button-group[data-v-46ce870e] {
margin: 0 2px;
}
}
/* Dropdown Container */
.dropdown-container[data-v-46ce870e] {
position: relative;
}
/* Dropdown Button */
.menu-button.dropdown-button[data-v-46ce870e] {
display: flex;
align-items: center;
gap: 2px;
padding: 0 6px;
min-width: 44px;
height: 28px;
}
.menu-button.dropdown-button .dropdown-arrow[data-v-46ce870e] {
font-size: 18px;
transition: transform 0.2s ease;
}
.menu-button.dropdown-button.is-active .dropdown-arrow[data-v-46ce870e] {
transform: rotate(180deg);
}
/* Dropdown Menu */
.dropdown-menu[data-v-46ce870e] {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 200px;
background: rgb(22, 22, 36); /* Opaque background to prevent seeing through to table selection */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow:
0 12px 24px -8px rgba(0, 0, 0, 0.5),
0 6px 12px -6px rgba(0, 0, 0, 0.3);
padding: 4px;
z-index: 10000; /* Higher than table cell selection (9999) and bubble menu base (9999) */
animation: dropdownSlideIn-46ce870e 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dropdownSlideIn-46ce870e {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Light mode dropdown backgrounds - also opaque */
[data-theme="light"] .dropdown-menu[data-v-46ce870e] {
background: rgb(255, 255, 255); /* Opaque white background for light mode */
border: 1px solid rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .presets-dropdown-menu[data-v-46ce870e] {
background: rgb(255, 255, 255); /* Opaque white background for light mode */
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* Dropdown Item */
.dropdown-item[data-v-46ce870e] {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
width: 100%;
border: none;
background: transparent;
color: rgb(var(--color-text-primary));
font-size: 13px;
line-height: 1.4;
cursor: pointer;
border-radius: 4px;
transition: all 0.15s ease;
text-align: left;
white-space: nowrap;
}
/* Item Icon Container */
.dropdown-item .item-icon[data-v-46ce870e] {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: rgba(var(--color-text-primary), 0.65);
}
.dropdown-item .item-icon svg[data-v-46ce870e] {
width: 16px;
height: 16px;
color: rgba(var(--color-text-primary), 0.65);
}
.dropdown-item .item-icon .material-icons-outlined[data-v-46ce870e] {
font-size: 18px;
color: rgba(var(--color-text-primary), 0.65);
}
.dropdown-item .item-icon-text[data-v-46ce870e] {
font-size: 11px;
font-weight: 700;
color: rgba(var(--color-text-primary), 0.65);
text-align: center;
}
.dropdown-item .item-label[data-v-46ce870e] {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown-item .item-check[data-v-46ce870e] {
margin-left: auto;
flex-shrink: 0;
}
.dropdown-item .item-check .material-icons-outlined[data-v-46ce870e] {
font-size: 16px;
color: var(--color-brand-primary);
}
.dropdown-item[data-v-46ce870e]:hover {
background: var(--color-brand-primary-10, rgba(59, 130, 246, 0.1));
}
.dropdown-item.is-active[data-v-46ce870e] {
background: var(--color-brand-primary-10, rgba(59, 130, 246, 0.1));
}
.dropdown-item.is-active .item-icon[data-v-46ce870e],
.dropdown-item.is-active .item-icon svg[data-v-46ce870e],
.dropdown-item.is-active .item-icon .material-icons-outlined[data-v-46ce870e],
.dropdown-item.is-active .item-icon-text[data-v-46ce870e] {
color: var(--color-brand-primary);
}
/* Submenu Arrow */
.dropdown-item .submenu-arrow[data-v-46ce870e] {
margin-left: auto;
flex-shrink: 0;
display: flex;
align-items: center;
transition: transform 0.2s ease;
}
.dropdown-item .submenu-arrow .material-icons-outlined[data-v-46ce870e] {
font-size: 18px;
color: rgba(var(--color-text-primary), 0.5);
}
.dropdown-item.submenu-open .submenu-arrow[data-v-46ce870e] {
transform: rotate(90deg);
}
/* Submenu Items */
.submenu-items[data-v-46ce870e] {
display: flex;
flex-direction: column;
gap: 0;
padding-left: 0;
margin: 0;
animation: submenuSlideIn-46ce870e 0.15s ease;
}
@keyframes submenuSlideIn-46ce870e {
from {
opacity: 0;
max-height: 0;
}
to {
opacity: 1;
max-height: 150px;
}
}
.dropdown-item.submenu-item[data-v-46ce870e] {
padding-left: 40px;
background: rgba(0, 0, 0, 0.1);
}
.dropdown-item.submenu-item[data-v-46ce870e]:hover {
background: var(--color-brand-primary-10, rgba(59, 130, 246, 0.15));
}
/* Dropdown Divider */
.dropdown-divider[data-v-46ce870e] {
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin: 4px 8px;
}
/* Focus visible for accessibility */
.menu-button[data-v-46ce870e]:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.menu-button[data-v-46ce870e] {
border: 1px solid currentColor;
}
.separator[data-v-46ce870e] {
background: currentColor;
opacity: 0.3;
}
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.bubble-menu[data-v-46ce870e] {
animation: none;
}
.menu-button[data-v-46ce870e] {
transition: none;
}
.quick-edit-button:disabled .material-icons-outlined[data-v-46ce870e] {
animation: none;
}
}
/* Color Picker Menu */
.color-picker-menu[data-v-46ce870e] {
min-width: 200px;
max-width: 240px;
padding: 8px;
}
.color-section[data-v-46ce870e] {
margin-bottom: 8px;
}
.color-section[data-v-46ce870e]:last-of-type {
margin-bottom: 4px;
}
.color-section-title[data-v-46ce870e] {
font-size: 11px;
font-weight: 600;
color: rgba(var(--color-text-primary), 0.7);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.color-grid[data-v-46ce870e] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
}
.color-swatch[data-v-46ce870e] {
width: 28px;
height: 28px;
border-radius: 4px;
border: 1.5px solid rgba(255, 255, 255, 0.15);
cursor: pointer;
transition: all 0.15s ease;
position: relative;
padding: 0;
background: transparent;
}
.color-swatch[data-v-46ce870e]:hover {
transform: scale(1.1);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.color-swatch.is-active[data-v-46ce870e] {
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 2px var(--color-brand-primary-20);
}
.color-swatch.is-active[data-v-46ce870e]::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(0, 0, 0, 0.8);
font-size: 14px;
font-weight: 700;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}
/* Special styling for transparent swatch */
.color-swatch[style*="transparent"][data-v-46ce870e] {
background:
linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%),
linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
background-size: 8px 8px;
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}
.color-reset-btn[data-v-46ce870e] {
width: 100%;
padding: 6px 10px;
margin-top: 4px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
color: rgb(var(--color-text-primary));
font-size: 12px;
cursor: pointer;
transition: all 0.15s ease;
font-weight: 500;
}
.color-reset-btn[data-v-46ce870e]:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.25);
}
.bubble-menu[data-v-4fc51fd7] {
z-index: 1000;
}
.menu-button[data-v-4fc51fd7] {
color: var(--text-primary);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;
}
.menu-button[data-v-4fc51fd7]:hover {
background-color: var(--bg-hover);
}
.menu-button[data-v-4fc51fd7]:active {
transform: scale(0.98);
}
/* Notion-Style Row Handles - 6-dot icons on left */
.notion-row-handle[data-v-a63ce576] {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
pointer-events: auto;
opacity: 0; /* Hidden by default */
transition: opacity 0.15s ease;
}
.notion-row-handle.is-visible[data-v-a63ce576] {
opacity: 1; /* Visible on hover */
}
.notion-column-handle[data-v-a63ce576] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
pointer-events: auto;
opacity: 0; /* Hidden by default */
transition: opacity 0.15s ease;
}
.notion-column-handle.is-visible[data-v-a63ce576] {
opacity: 1; /* Visible on hover */
}
/* Handle Button - 6-dot icon */
.handle-button[data-v-a63ce576] {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
background: rgba(var(--color-bg-secondary-rgb, 40, 40, 40), 0.9);
border-radius: 2px;
cursor: grab;
transition: all 0.12s ease;
color: rgba(var(--color-text-secondary-rgb, 156, 163, 175), 0.6);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.handle-button[data-v-a63ce576]:active {
cursor: grabbing;
}
.notion-row-handle:hover .handle-button[data-v-a63ce576],
.notion-column-handle:hover .handle-button[data-v-a63ce576],
.handle-button[data-v-a63ce576]:hover {
background: rgba(var(--color-bg-secondary-rgb, 40, 40, 40), 1);
color: rgba(var(--color-text-primary-rgb, 229, 229, 229), 0.9);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.handle-button .material-icons-outlined[data-v-a63ce576] {
font-size: 14px;
transform: rotate(90deg); /* Make dots horizontal */
}
/* Dropdown Menu */
.notion-dropdown-menu[data-v-a63ce576] {
min-width: 180px;
background: rgba(var(--color-bg-tertiary-rgb, 30, 30, 30), 0.98);
border: 1px solid rgba(var(--color-border-primary-rgb, 255, 255, 255), 0.1);
border-radius: 4px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 4px 8px rgba(0, 0, 0, 0.3);
animation: fadeInScale-a63ce576 0.12s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
padding: 2px; /* Minimal padding */
pointer-events: auto;
}
/* Notion-Style Add Row Area - Full width hover zone at bottom of table */
.notion-add-row-area[data-v-a63ce576] {
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
cursor: pointer;
padding: 2px 0;
transition: background-color 0.15s ease;
border-radius: 4px;
animation: fadeIn-a63ce576 0.15s ease;
}
.notion-add-row-area[data-v-a63ce576]:hover {
background: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.08);
}
.notion-add-row-area[data-v-a63ce576]:active {
background: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.12);
}
.add-row-content[data-v-a63ce576] {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.15s ease;
}
.notion-add-row-area:hover .add-row-content[data-v-a63ce576] {
background: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.1);
}
.add-button-text[data-v-a63ce576] {
font-size: 13px;
color: rgba(var(--color-text-secondary-rgb, 156, 163, 175), 0.8);
font-weight: 500;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: color 0.15s ease;
}
.notion-add-row-area:hover .add-button-text[data-v-a63ce576] {
color: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 1);
}
/* Notion-Style Add Column Area - Full height hover zone at right of table */
.notion-add-column-area[data-v-a63ce576] {
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
cursor: pointer;
padding: 0 2px;
transition: background-color 0.15s ease;
border-radius: 4px;
animation: fadeIn-a63ce576 0.15s ease;
}
.notion-add-column-area[data-v-a63ce576]:hover {
background: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.08);
}
.notion-add-column-area[data-v-a63ce576]:active {
background: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.12);
}
.add-column-content[data-v-a63ce576] {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 4px;
border-radius: 4px;
transition: all 0.15s ease;
}
.notion-add-column-area:hover .add-column-content[data-v-a63ce576] {
background: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.1);
}
/* Shared icon styles for add buttons */
.add-button-icon[data-v-a63ce576] {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 3px;
color: rgba(var(--color-text-secondary-rgb, 156, 163, 175), 0.7);
transition: all 0.15s ease;
}
.notion-add-row-area:hover .add-button-icon[data-v-a63ce576],
.notion-add-column-area:hover .add-button-icon[data-v-a63ce576] {
color: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 1);
background: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.15);
}
.add-button-icon .material-icons-outlined[data-v-a63ce576] {
font-size: 16px;
}
/* Cell Menu - Notion-style context menu */
.notion-cell-menu[data-v-a63ce576] {
min-width: 200px;
background: rgba(var(--color-bg-tertiary-rgb, 30, 30, 30), 0.98);
border: 1px solid rgba(var(--color-border-primary-rgb, 255, 255, 255), 0.1);
border-radius: 8px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 4px 8px rgba(0, 0, 0, 0.3);
animation: fadeInScale-a63ce576 0.15s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.menu-item[data-v-a63ce576] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 16px;
border: none;
background: transparent;
color: #e5e5e5;
font-size: 14px;
text-align: left;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 400;
}
.menu-item[data-v-a63ce576]:hover:not(:disabled) {
background: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.1);
color: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 1);
}
.menu-item[data-v-a63ce576]:active:not(:disabled) {
background: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.15);
}
.menu-item.danger[data-v-a63ce576]:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.menu-item[data-v-a63ce576]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.menu-item .material-icons-outlined[data-v-a63ce576] {
font-size: 18px;
opacity: 0.8;
}
.menu-divider[data-v-a63ce576] {
height: 1px;
margin: 4px 0;
background: rgba(var(--color-border-primary-rgb, 255, 255, 255), 0.1);
}
/* Material Icons */
.material-icons-outlined[data-v-a63ce576] {
font-family: 'Material Icons Outlined', 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Animation keyframes */
@keyframes fadeIn-a63ce576 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInScale-a63ce576 {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Light mode support */
[data-theme="light"] .handle-button[data-v-a63ce576] {
color: rgba(0, 0, 0, 0.4);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .handle-button[data-v-a63ce576]:hover {
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 0.8);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .notion-dropdown-menu[data-v-a63ce576],
[data-theme="light"] .notion-cell-menu[data-v-a63ce576] {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(0, 0, 0, 0.1);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.12),
0 4px 8px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .menu-item[data-v-a63ce576] {
color: #333333;
}
/* Light mode for Notion-style add areas */
[data-theme="light"] .notion-add-row-area[data-v-a63ce576]:hover,
[data-theme="light"] .notion-add-column-area[data-v-a63ce576]:hover {
background: rgba(59, 130, 246, 0.06);
}
[data-theme="light"] .notion-add-row-area[data-v-a63ce576]:active,
[data-theme="light"] .notion-add-column-area[data-v-a63ce576]:active {
background: rgba(59, 130, 246, 0.1);
}
[data-theme="light"] .notion-add-row-area:hover .add-row-content[data-v-a63ce576],
[data-theme="light"] .notion-add-column-area:hover .add-column-content[data-v-a63ce576] {
background: rgba(59, 130, 246, 0.08);
}
[data-theme="light"] .add-button-text[data-v-a63ce576] {
color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .notion-add-row-area:hover .add-button-text[data-v-a63ce576] {
color: rgba(59, 130, 246, 1);
}
[data-theme="light"] .add-button-icon[data-v-a63ce576] {
color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .notion-add-row-area:hover .add-button-icon[data-v-a63ce576],
[data-theme="light"] .notion-add-column-area:hover .add-button-icon[data-v-a63ce576] {
color: rgba(59, 130, 246, 1);
background: rgba(59, 130, 246, 0.12);
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.notion-row-handle[data-v-a63ce576],
.notion-column-handle[data-v-a63ce576],
.notion-add-row-button[data-v-a63ce576],
.notion-add-column-button[data-v-a63ce576],
.notion-dropdown-menu[data-v-a63ce576],
.notion-cell-menu[data-v-a63ce576] {
animation: none;
}
.handle-button[data-v-a63ce576],
.add-button[data-v-a63ce576],
.menu-item[data-v-a63ce576] {
transition: none;
}
}
/* Block Type Menu Container */
.block-type-menu-container[data-v-abd5dd59] {
position: relative;
display: inline-block;
z-index: 10000;
}
/* Direct Menu (no dropdown button) - Icon toolbar style */
.block-type-menu[data-v-abd5dd59] {
position: absolute;
top: 0;
left: 0;
width: 308px;
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.08),
0 6px 12px rgba(0, 0, 0, 0.04);
z-index: 10000;
overflow: hidden;
animation: menuSlideIn-abd5dd59 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dark mode */
[data-theme="dark"] .block-type-menu[data-v-abd5dd59] {
background: #1F1F1F;
border-color: rgba(255, 255, 255, 0.08);
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.24),
0 6px 12px rgba(0, 0, 0, 0.16);
}
/* Menu Header - Compact */
.menu-header[data-v-abd5dd59] {
padding: 10px 12px 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .menu-header[data-v-abd5dd59] {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.menu-title[data-v-abd5dd59] {
font-size: 11px;
font-weight: 600;
color: #8F959E;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Menu Content - Compact */
.menu-content[data-v-abd5dd59] {
padding: 8px;
max-height: 420px;
overflow-y: auto;
}
/* Icon Toolbar Grid */
.icon-toolbar[data-v-abd5dd59] {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
padding: 0;
margin-bottom: 4px;
}
.icon-button[data-v-abd5dd59] {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 6px;
background: transparent;
color: #5F6368;
cursor: pointer;
transition: all 0.12s ease;
border: 1px solid transparent;
}
[data-theme="dark"] .icon-button[data-v-abd5dd59] {
color: rgba(255, 255, 255, 0.7);
}
.icon-button[data-v-abd5dd59]:hover {
background: rgba(59, 130, 246, 0.08);
color: #3B82F6;
border-color: rgba(59, 130, 246, 0.2);
}
/* Custom icon styling for headings */
.custom-icon[data-v-abd5dd59] {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.custom-icon svg[data-v-abd5dd59] {
width: 20px;
height: 20px;
}
.icon-button.is-active[data-v-abd5dd59] {
background: rgba(59, 130, 246, 0.12);
color: #3B82F6;
border-color: rgba(59, 130, 246, 0.3);
}
.icon-button .material-icons-outlined[data-v-abd5dd59] {
font-size: 18px;
}
/* Menu Items - Text options below toolbar */
.menu-item[data-v-abd5dd59] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
margin: 1px 0;
cursor: pointer;
transition: all 0.12s ease;
border-radius: 6px;
position: relative;
min-height: 40px;
}
.menu-item-arrow[data-v-abd5dd59] {
margin-left: auto;
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.5);
}
.menu-item.has-submenu[data-v-abd5dd59] {
padding-right: 40px;
}
.menu-item.menu-back[data-v-abd5dd59] {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
margin-bottom: 8px;
border-radius: 0;
}
[data-theme="dark"] .menu-item.menu-back[data-v-abd5dd59] {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.menu-item[data-v-abd5dd59]:hover {
background: rgba(59, 130, 246, 0.08);
}
[data-theme="dark"] .menu-item[data-v-abd5dd59]:hover {
background: rgba(59, 130, 246, 0.12);
}
.menu-item.is-active[data-v-abd5dd59] {
background: rgba(59, 130, 246, 0.12);
}
[data-theme="dark"] .menu-item.is-active[data-v-abd5dd59] {
background: rgba(59, 130, 246, 0.16);
}
.menu-item.is-active .menu-item-icon[data-v-abd5dd59] {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
}
.menu-item.is-active .menu-item-name[data-v-abd5dd59] {
color: #3b82f6;
}
/* Menu Item Icon - Compact Circular style */
.menu-item-icon[data-v-abd5dd59] {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: rgba(143, 149, 158, 0.1);
border-radius: 50%;
color: #5F6368;
flex-shrink: 0;
transition: all 0.12s ease;
}
[data-theme="dark"] .menu-item-icon[data-v-abd5dd59] {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
}
.menu-item:hover .menu-item-icon[data-v-abd5dd59] {
background: rgba(59, 130, 246, 0.15);
color: #3B82F6;
}
.menu-item-icon .material-icons-outlined[data-v-abd5dd59] {
font-size: 16px;
}
/* Menu Item Content */
.menu-item-content[data-v-abd5dd59] {
flex: 1;
min-width: 0;
}
.menu-item-name[data-v-abd5dd59] {
font-size: 13px;
font-weight: 500;
color: #1F2937;
line-height: 1.4;
}
[data-theme="dark"] .menu-item-name[data-v-abd5dd59] {
color: #E5E7EB;
}
/* Menu Item Shortcut - Compact */
.menu-item-shortcut[data-v-abd5dd59] {
font-size: 10px;
color: #9CA3AF;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
background: rgba(0, 0, 0, 0.04);
padding: 2px 5px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}
[data-theme="dark"] .menu-item-shortcut[data-v-abd5dd59] {
color: #6B7280;
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.1);
}
/* Menu divider between toolbar and text options */
.menu-divider[data-v-abd5dd59] {
height: 1px;
background: rgba(0, 0, 0, 0.08);
margin: 8px 0;
}
[data-theme="dark"] .menu-divider[data-v-abd5dd59] {
background: rgba(255, 255, 255, 0.08);
}
/* Color picker active state */
.color-active[data-v-abd5dd59] {
border: 2px solid #3B82F6 !important;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
/* Scrollbar for menu content - Feishu style */
.menu-content[data-v-abd5dd59]::-webkit-scrollbar {
width: 6px;
}
.menu-content[data-v-abd5dd59]::-webkit-scrollbar-track {
background: transparent;
}
.menu-content[data-v-abd5dd59]::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.12);
border-radius: 3px;
}
[data-theme="dark"] .menu-content[data-v-abd5dd59]::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
.menu-content[data-v-abd5dd59]::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .menu-content[data-v-abd5dd59]::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Animations */
@keyframes menuSlideIn-abd5dd59 {
from {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Material Icons */
.material-icons-outlined[data-v-abd5dd59] {
font-family: 'Material Icons Outlined', 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Responsive Design */
@media (max-width: 768px) {
.block-type-menu[data-v-abd5dd59] {
min-width: 280px;
max-width: 300px;
}
.menu-item[data-v-abd5dd59] {
padding: 8px 12px;
}
.menu-item-icon[data-v-abd5dd59] {
width: 28px;
height: 28px;
}
.menu-item-name[data-v-abd5dd59] {
font-size: 13px;
}
.menu-item-description[data-v-abd5dd59] {
font-size: 11px;
}
}
/* Focus states for accessibility */
.menu-item[data-v-abd5dd59]:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* High contrast mode */
@media (prefers-contrast: high) {
.menu-item[data-v-abd5dd59] {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.block-type-menu[data-v-abd5dd59] {
animation: none;
}
.menu-item[data-v-abd5dd59] {
transition: none;
}
}
/* ------------------------------ */
/* Light Mode Overrides */
/* ------------------------------ */
[data-theme="light"] .block-type-menu[data-v-abd5dd59] {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border-subtle);
box-shadow: var(--shadow-lg);
}
[data-theme="light"] .menu-header[data-v-abd5dd59] {
border-bottom: 1px solid var(--color-border-subtle);
}
[data-theme="light"] .menu-title[data-v-abd5dd59] {
color: var(--color-text-secondary);
}
[data-theme="light"] .menu-item[data-v-abd5dd59] {
border-left-color: transparent;
}
[data-theme="light"] .menu-item[data-v-abd5dd59]:hover {
background: var(--color-bg-hover);
border-left-color: var(--color-brand-primary-20);
}
[data-theme="light"] .menu-item.is-active[data-v-abd5dd59] {
background: var(--color-brand-primary-10);
border-left-color: var(--color-brand-primary);
}
[data-theme="light"] .menu-item.is-active .menu-item-icon[data-v-abd5dd59],
[data-theme="light"] .menu-item.is-active .menu-item-name[data-v-abd5dd59] {
color: var(--color-brand-primary);
}
[data-theme="light"] .menu-item-icon[data-v-abd5dd59] {
background: var(--color-bg-hover);
color: var(--color-text-secondary);
}
[data-theme="light"] .menu-item-description[data-v-abd5dd59] {
color: var(--color-text-tertiary);
}
[data-theme="light"] .menu-item-shortcut[data-v-abd5dd59] {
color: var(--color-text-tertiary);
background: var(--color-bg-hover);
border: 1px solid var(--color-border-subtle);
}
:root {
/* Application-level layers (example) */
--z-app-base: 0;
--z-app-header: 100;
--z-app-popover: 9000;
--z-app-modal: 20000;
--z-app-toast: 30000;
/* Editor-scoped layers */
--z-editor-base: 1000;
--z-editor-content: 1005; /* content blocks */
--z-editor-decorations: 1008; /* minor decorations */
--z-editor-drag-handle: 10010;
--z-editor-drag-clone: 10012;
--z-editor-drop-indicator: 10020;
--z-editor-block-menu: 10030;
}
.drag-handle-container[data-v-91ea6872] {
display: flex;
align-items: center;
z-index: var(--z-editor-drag-handle);
}
.drag-handle[data-v-91ea6872] {
width: 20px;
height: 20px;
border-radius: 4px;
background: transparent;
color: #8F959E;
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
border: none;
box-shadow: none;
}
.drag-handle[data-v-91ea6872]:hover {
background: rgba(143, 149, 158, 0.08);
color: #5F6368;
transform: none;
box-shadow: none;
}
.drag-handle[data-v-91ea6872]:active,
.drag-handle--active[data-v-91ea6872] {
cursor: grabbing;
background: rgba(59, 130, 246, 0.12);
color: #3B82F6;
}
.drag-handle-icon[data-v-91ea6872] {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.drag-handle-icon svg[data-v-91ea6872] {
width: 100%;
height: 100%;
color: inherit;
}
.drag-handle:hover .drag-handle-icon[data-v-91ea6872] {
transform: none;
}
/* Plus icon rotation animation */
.drag-handle-icon--plus[data-v-91ea6872] {
transition: transform 0.2s ease;
}
.drag-handle:hover .drag-handle-icon--plus[data-v-91ea6872] {
transform: rotate(90deg);
}
.drag-handle--menu-open .drag-handle-icon--plus[data-v-91ea6872] {
transform: rotate(45deg);
}
.drag-handle--menu-open[data-v-91ea6872] {
background: rgba(59, 130, 246, 0.12);
color: #3B82F6;
}
.block-menu-container[data-v-91ea6872] {
/* Position is handled by the blockMenuStyle computed property */
z-index: var(--z-editor-block-menu);
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideInFromRight-91ea6872 {
from {
opacity: 0;
transform: translateX(8px) scale(0.95);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.is-dragging {
opacity: 0.2 !important;
transition: opacity 0.3s ease;
}
/* Special handling for chart blocks during drag */
.echarts-block.is-dragging,.mermaid-block.is-dragging,[data-type="echarts"].is-dragging,[data-type="mermaid"].is-dragging {
border: 1px dashed rgba(59, 130, 246, 0.5);
background: rgba(59, 130, 246, 0.05);
}
/* Interactive block hover states */
.echarts-block:hover,.mermaid-block:hover,[data-type="echarts"]:hover,[data-type="mermaid"]:hover {
outline: 2px solid transparent;
outline-offset: 4px;
transition: outline 0.2s ease;
}
/* Show draggable area on hover for interactive blocks */
.echarts-block:hover,.mermaid-block:hover {
position: relative;
cursor: move;
}
/* Visual indicator for draggable area */
.echarts-block::before,.mermaid-block::before {
content: '';
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border: 2px solid transparent;
border-radius: 8px;
pointer-events: none;
transition: all 0.2s ease;
z-index: -1;
}
.echarts-block:hover::before,.mermaid-block:hover::before {
border-color: rgba(var(--color-brand-primary-rgb), 0.1);
background: rgba(var(--color-brand-primary-rgb), 0.02);
}
/* Only disable pointer events during actual dragging */
.echarts-block.is-dragging canvas,.echarts-block.is-dragging svg,.mermaid-block.is-dragging svg {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.drag-drop-indicator {
height: 3px;
background: rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.7);
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.25), 0 2px 10px rgba(var(--color-brand-primary-rgb, 59, 130, 246), 0.2);
}
/* Selected block highlight */
.block-selected-highlight {
background: rgba(59, 130, 246, 0.12) !important;
border-radius: 6px;
transition: background 0.15s ease, outline 0.15s ease;
outline: 2px solid rgba(59, 130, 246, 0.4) !important;
outline-offset: -1px;
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15);
}
/* Dark mode highlight */
.block-selected-highlight {
background: rgba(59, 130, 246, 0.15) !important;
outline: 2px solid rgba(59, 130, 246, 0.5) !important;
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.link-floating-menu[data-v-a789111c] {
position: absolute;
z-index: 1000;
background: var(--color-bg-primary, #1a1a1a);
border: 1px solid var(--color-border-primary, #333);
border-radius: 8px;
padding: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
min-width: 280px;
max-width: 400px;
animation: fadeIn-a789111c 0.15s ease-out;
}
@keyframes fadeIn-a789111c {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.link-preview-section[data-v-a789111c] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
gap: 12px;
}
.link-url[data-v-a789111c] {
flex: 1;
color: var(--color-brand-primary, #3b82f6);
text-decoration: none;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s;
}
.link-url[data-v-a789111c]:hover {
color: var(--color-brand-hover, #2563eb);
text-decoration: underline;
}
.link-actions[data-v-a789111c] {
display: flex;
gap: 4px;
}
.link-action-btn[data-v-a789111c] {
padding: 6px;
background: transparent;
border: none;
border-radius: 4px;
color: var(--color-text-secondary, #999);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.link-action-btn[data-v-a789111c]:hover {
background: var(--color-bg-tertiary, #2a2a2a);
color: var(--color-text-primary, #fff);
}
.link-action-btn svg[data-v-a789111c] {
width: 16px;
height: 16px;
}
.edit-link-button[data-v-a789111c] {
margin: 4px;
padding: 6px 12px;
background: var(--color-bg-tertiary, #2a2a2a);
border: 1px solid var(--color-border-primary, #333);
border-radius: 6px;
color: var(--color-text-primary, #fff);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.edit-link-button[data-v-a789111c]:hover {
background: var(--color-bg-secondary, #333);
border-color: var(--color-border-hover, #444);
}
/* Light theme adjustments */
[data-theme="light"] .link-floating-menu[data-v-a789111c] {
background: #fff;
border-color: #e5e7eb;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .link-action-btn[data-v-a789111c] {
color: #6b7280;
}
[data-theme="light"] .link-action-btn[data-v-a789111c]:hover {
background: #f3f4f6;
color: #111827;
}
[data-theme="light"] .edit-link-button[data-v-a789111c] {
background: #f9fafb;
border-color: #e5e7eb;
color: #111827;
}
[data-theme="light"] .edit-link-button[data-v-a789111c]:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
/* Ensure proper z-index for modal */
.headlessui-dialog-panel-v-6[data-v-eb035d3f] {
position: relative;
}
.collaboration-presence[data-v-b194b548] {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.5rem;
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 1rem;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-size: 0.75rem;
z-index: 20;
}
.status-indicator[data-v-b194b548] {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.status-indicator.status-connected[data-v-b194b548] {
background-color: var(--color-brand-primary);
box-shadow: 0 0 0 2px var(--color-brand-primary-20);
}
.status-indicator.status-connecting[data-v-b194b548] {
background-color: #f59e0b;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
animation: pulse-b194b548 2s ease-in-out infinite;
}
.status-indicator.status-disconnected[data-v-b194b548] {
background-color: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
@keyframes pulse-b194b548 {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.connected-users[data-v-b194b548] {
display: flex;
align-items: center;
gap: 0.375rem;
}
.users-avatars[data-v-b194b548] {
display: flex;
align-items: center;
margin-left: -0.25rem;
}
.user-avatar[data-v-b194b548] {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.5rem;
font-weight: 600;
border: 2px solid white;
flex-shrink: 0;
margin-left: -0.25rem;
cursor: pointer;
transition: transform 0.2s;
}
.user-avatar[data-v-b194b548]:hover {
transform: translateY(-2px);
z-index: 1;
}
.user-avatar[data-v-b194b548]:first-child {
margin-left: 0;
}
.users-count[data-v-b194b548] {
color: var(--color-text-secondary, #6b7280);
font-size: 0.75rem;
font-weight: 500;
margin-left: 0.125rem;
}
@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.22"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
.echarts-error[data-v-d9dfb783] {
padding: 2rem;
color: #ef4444;
text-align: center;
font-size: 14px;
}
.mermaid-block[data-v-286eb578] {
display: block;
position: relative;
margin: 1rem 6px 1rem 6px;
width: calc(100% - 50px);
max-width: calc(100% - 50px);
cursor: pointer;
}
.mermaid-block.selected[data-v-286eb578] {
box-shadow: 0 0 0 2px var(--color-brand-primary);
border-radius: 4px;
}
.mermaid-container[data-v-286eb578] {
display: block;
width: 100%;
min-height: 100px;
overflow: hidden;
box-sizing: border-box;
}
.mermaid-container[data-v-286eb578] svg {
max-width: 100% !important;
height: auto !important;
}
.error[data-v-286eb578] {
color: #ef4444;
padding: 1rem;
background: #fee;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
}
/* Code block wrapper */
.code-block-wrapper[data-v-48b7df4b] {
position: relative;
margin: 1.5rem 0;
border-radius: 8px;
background: #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: visible; /* Allow dropdown to overflow */
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.code-block-wrapper.selected[data-v-48b7df4b] {
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 3px var(--color-brand-primary-20);
}
.code-block-wrapper pre[data-v-48b7df4b] {
margin: 0;
padding: 1.25rem;
padding-top: 2.75rem; /* Make room for language selector */
overflow-x: auto;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 0.9rem;
line-height: 1.6;
}
.code-block-wrapper pre code[data-v-48b7df4b] {
display: block;
color: #d4d4d4;
background: transparent;
padding: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
white-space: pre;
}
/* Language selector container */
.language-selector-container[data-v-48b7df4b] {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 10;
}
/* Language selector button */
.language-selector[data-v-48b7df4b] {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.75rem;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
letter-spacing: 0.5px;
cursor: pointer;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: all 0.2s ease;
opacity: 0.7;
}
.language-selector[data-v-48b7df4b]:hover,
.language-selector.visible[data-v-48b7df4b] {
opacity: 1;
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.9);
}
.language-selector[data-v-48b7df4b]:focus {
outline: none;
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 2px var(--color-brand-primary-20);
opacity: 1;
}
.dropdown-icon[data-v-48b7df4b] {
display: flex;
align-items: center;
opacity: 0.7;
transition: transform 0.2s ease;
}
/* Dropdown menu - now using fixed positioning via Teleport */
.language-dropdown-menu[data-v-48b7df4b] {
/* position is set inline via dropdownStyle */
width: 12rem;
max-height: 18rem;
overflow-y: auto !important;
overflow-x: hidden !important;
background: var(--color-bg-elevated, #2a2a2a);
border: 1px solid var(--color-border-primary, rgba(255, 255, 255, 0.15));
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
padding: 0.25rem;
z-index: 9999; /* High z-index since it's in body */
list-style: none;
/* Completely hide scrollbar - all browsers */
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE and Edge */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.language-dropdown-menu[data-v-48b7df4b]::-webkit-scrollbar,
.language-dropdown-menu[data-v-48b7df4b] *::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Additional scrollbar hiding for all child elements */
.language-dropdown-menu[data-v-48b7df4b] *,
.language-dropdown-menu[data-v-48b7df4b] {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
/* Language option */
.language-option[data-v-48b7df4b] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.75rem;
padding-right: 2rem; /* Space for check icon */
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
font-size: 0.875rem;
color: var(--color-text-secondary, rgba(255, 255, 255, 0.8));
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.language-option.active[data-v-48b7df4b] {
background: var(--color-bg-hover, rgba(255, 255, 255, 0.08));
color: var(--color-text-primary, rgba(255, 255, 255, 0.95));
}
.language-option.selected[data-v-48b7df4b] {
color: var(--color-brand-primary);
font-weight: 500;
}
.check-icon[data-v-48b7df4b] {
position: absolute;
right: 0.75rem;
display: flex;
align-items: center;
color: var(--color-brand-primary);
}
/* Code block scrollbar */
.code-block-wrapper pre[data-v-48b7df4b]::-webkit-scrollbar {
height: 8px;
}
.code-block-wrapper pre[data-v-48b7df4b]::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.code-block-wrapper pre[data-v-48b7df4b]::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
.code-block-wrapper pre[data-v-48b7df4b]::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
/* Light mode support */
[data-theme="light"] .code-block-wrapper[data-v-48b7df4b] {
background: #f5f5f5;
border-color: #e0e0e0;
}
[data-theme="light"] .code-block-wrapper pre code[data-v-48b7df4b] {
color: #333333;
}
[data-theme="light"] .language-selector[data-v-48b7df4b] {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .language-selector[data-v-48b7df4b]:hover,
[data-theme="light"] .language-selector.visible[data-v-48b7df4b] {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.25);
color: rgba(0, 0, 0, 0.9);
}
[data-theme="light"] .language-dropdown-menu[data-v-48b7df4b] {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .language-option[data-v-48b7df4b] {
color: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .language-option.active[data-v-48b7df4b] {
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.9);
}
/* Responsive design */
@media (max-width: 768px) {
.code-block-wrapper pre[data-v-48b7df4b] {
font-size: 0.85rem;
padding: 1rem;
padding-top: 2.5rem;
}
.language-selector[data-v-48b7df4b] {
font-size: 0.7rem;
padding: 0.3rem 0.6rem;
}
.language-dropdown-menu[data-v-48b7df4b] {
width: 12rem;
}
}
/* Override tippy.js default styles - must be unscoped */
.tippy-box[data-theme~='slash-commands'] {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.tippy-box[data-theme~='slash-commands'] .tippy-content {
padding: 0 !important;
}
.tippy-box[data-theme~='slash-commands'] .tippy-arrow {
display: none !important;
}
/* Match BlockTypeMenu styling */
.slash-commands-list[data-v-dfa80d55] {
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.12),
0 6px 12px rgba(0, 0, 0, 0.08);
padding: 4px;
min-width: 280px;
max-height: 400px;
overflow-y: auto;
z-index: 9999;
}
.slash-commands-list button[data-v-dfa80d55] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
padding: 8px 10px;
border: none;
background: none;
cursor: pointer;
border-radius: 6px;
transition: all 0.12s ease;
min-height: 40px;
}
.slash-commands-list button[data-v-dfa80d55]:hover {
background: rgba(59, 130, 246, 0.08);
}
.slash-commands-list button.is-selected[data-v-dfa80d55] {
background: rgba(59, 130, 246, 0.12);
}
.command-icon[data-v-dfa80d55] {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.04);
color: #5F6368;
flex-shrink: 0;
font-size: 18px;
transition: all 0.12s ease;
}
.slash-commands-list button:hover .command-icon[data-v-dfa80d55] {
background: rgba(59, 130, 246, 0.15);
color: #3B82F6;
}
.slash-commands-list button.is-selected .command-icon[data-v-dfa80d55] {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
}
.command-content[data-v-dfa80d55] {
flex: 1;
min-width: 0;
}
.command-title[data-v-dfa80d55] {
font-size: 13px;
font-weight: 500;
color: #1C1C1E;
line-height: 1.4;
}
.slash-commands-list button.is-selected .command-title[data-v-dfa80d55] {
color: #3b82f6;
}
.command-description[data-v-dfa80d55] {
font-size: 11px;
color: #8F959E;
line-height: 1.3;
margin-top: 2px;
}
/* Dark mode support */
[data-theme="dark"] .slash-commands-list[data-v-dfa80d55] {
background: #1F1F1F;
border-color: rgba(255, 255, 255, 0.08);
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.24),
0 6px 12px rgba(0, 0, 0, 0.16);
}
[data-theme="dark"] .slash-commands-list button[data-v-dfa80d55]:hover {
background: rgba(59, 130, 246, 0.12);
}
[data-theme="dark"] .slash-commands-list button.is-selected[data-v-dfa80d55] {
background: rgba(59, 130, 246, 0.16);
}
[data-theme="dark"] .command-icon[data-v-dfa80d55] {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .slash-commands-list button:hover .command-icon[data-v-dfa80d55] {
background: rgba(59, 130, 246, 0.15);
color: #3B82F6;
}
[data-theme="dark"] .slash-commands-list button.is-selected .command-icon[data-v-dfa80d55] {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
}
[data-theme="dark"] .command-title[data-v-dfa80d55] {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .slash-commands-list button.is-selected .command-title[data-v-dfa80d55] {
color: #3b82f6;
}
[data-theme="dark"] .command-description[data-v-dfa80d55] {
color: rgba(255, 255, 255, 0.5);
}
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
/* Import collaboration styles - must be first */
/* Collaboration Cursor Styles - Using TipTap's default class names */
/* Main cursor caret - must use relative positioning for correct cursor placement */
.collaboration-carets__caret {
position: relative;
margin-left: -1px;
margin-right: -1px;
word-break: normal;
pointer-events: none;
/* Dynamic z-index to stagger overlapping cursors */
z-index: 50;
/* Don't set border-color here - it's set inline by render function */
}
/* Stagger z-index for multiple cursors to prevent complete overlap */
.collaboration-carets__caret:nth-of-type(1) { z-index: 50;
}
.collaboration-carets__caret:nth-of-type(2) { z-index: 51;
}
.collaboration-carets__caret:nth-of-type(3) { z-index: 52;
}
.collaboration-carets__caret:nth-of-type(4) { z-index: 53;
}
.collaboration-carets__caret:nth-of-type(5) { z-index: 54;
}
.collaboration-carets__caret:nth-of-type(n+6) { z-index: 55;
}
/* Cursor label with improved visibility */
.collaboration-carets__label {
position: absolute;
top: -1.8em;
left: -1px;
font-size: 11px;
font-style: normal;
font-weight: 600;
line-height: 1.2;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
color: #fff;
padding: 3px 8px;
border-radius: 4px 4px 4px 0;
white-space: nowrap;
pointer-events: none;
/* Ensure label is always on top */
z-index: 100;
/* Add shadow for better visibility */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
/* Add border for better contrast */
border: 1px solid rgba(255, 255, 255, 0.2);
/* Smooth transitions */
transition: transform 0.15s ease-out;
}
/* Offset labels when multiple cursors are close together */
.collaboration-carets__caret:nth-of-type(2n) .collaboration-carets__label {
/* Offset every even cursor label slightly to the right */
left: 8px;
}
.collaboration-carets__caret:nth-of-type(3n) .collaboration-carets__label {
/* Offset every third cursor label up and to the right */
top: -3.2em;
left: 12px;
}
.collaboration-carets__caret:nth-of-type(4n) .collaboration-carets__label {
/* Offset every fourth cursor label further */
left: 16px;
}
/* Hover effect for better interactivity */
.collaboration-carets__caret:hover .collaboration-carets__label {
transform: scale(1.05);
z-index: 101;
}
/* Selection styles for remote users - color is set inline by selectionRender */
.collaboration-carets__selection {
pointer-events: none;
/* Don't set opacity or background-color here - they're set inline */
}
/* Visible cursor line - the actual blinking cursor */
.collaboration-carets__caret::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 1.2em;
/* Color is set by parent's border-color via currentColor */
background-color: currentColor;
animation: caret-blink 1s step-end infinite;
transform: translateX(-1px);
/* Add shadow to make cursor more visible when overlapping */
box-shadow: 0 0 2px currentColor, 0 0 4px rgba(0, 0, 0, 0.3);
}
/* Offset cursor lines slightly when multiple cursors overlap */
.collaboration-carets__caret:nth-of-type(2n)::after {
transform: translateX(1px); /* Shift even cursors right */
animation-delay: 0.2s; /* Stagger animation timing */
}
.collaboration-carets__caret:nth-of-type(3n)::after {
transform: translateX(3px); /* Shift every third cursor further right */
animation-delay: 0.4s; /* Stagger animation timing */
}
.collaboration-carets__caret:nth-of-type(4n)::after {
transform: translateX(5px); /* Shift every fourth cursor even further */
width: 2.5px; /* Make it slightly thicker for visibility */
animation-delay: 0.6s; /* Stagger animation timing */
}
.collaboration-carets__caret:nth-of-type(5n)::after {
transform: translateX(7px); /* Shift fifth cursor */
animation-delay: 0.8s; /* Stagger animation timing */
}
@keyframes caret-blink {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
/* Alternative animation for better visibility */
@keyframes caret-pulse {
0%, 100% {
opacity: 1;
transform: scaleY(1);
}
50% {
opacity: 0.7;
transform: scaleY(0.95);
}
}
/* Legacy class names for backwards compatibility */
.collaboration-cursor {
position: relative;
margin-left: -1px;
margin-right: -1px;
border-left: 2px solid;
border-color: inherit;
word-break: normal;
pointer-events: none;
}
/* Professional TipTap Editor Styling - Match Export Format */
.ProseMirror {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
line-height: 1.6 !important;
color: #e5e5e5 !important;
outline: none;
}
/* Light mode ProseMirror styles */
[data-theme="light"] .ProseMirror {
color: var(--color-text-primary) !important;
}
/* Professional Typography Hierarchy */
.ProseMirror h1 {
font-size: 2.25rem !important;
font-weight: 700 !important;
margin: 2rem 0 1rem 0 !important;
color: #f3f4f6 !important;
border-bottom: 2px solid rgba(229, 229, 229, 0.3) !important;
padding-bottom: 0.5rem !important;
}
[data-theme="light"] .ProseMirror h1 {
color: var(--color-text-primary) !important;
border-bottom: 2px solid var(--color-border-primary) !important;
}
.ProseMirror h2 {
font-size: 1.875rem !important;
font-weight: 600 !important;
margin: 1.75rem 0 1rem 0 !important;
color: #f3f4f6 !important;
border-bottom: 1px solid rgba(229, 229, 229, 0.2) !important;
padding-bottom: 0.25rem !important;
}
[data-theme="light"] .ProseMirror h2 {
color: var(--color-text-primary) !important;
border-bottom: 1px solid var(--color-border-primary) !important;
}
.ProseMirror h3 {
font-size: 1.5rem !important;
font-weight: 600 !important;
margin: 1.5rem 0 0.75rem 0 !important;
color: #f3f4f6 !important;
}
[data-theme="light"] .ProseMirror h3 {
color: var(--color-text-primary) !important;
}
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
font-weight: 600 !important;
margin: 1.25rem 0 0.5rem 0 !important;
color: #f3f4f6 !important;
}
[data-theme="light"] .ProseMirror h4,
[data-theme="light"] .ProseMirror h5,
[data-theme="light"] .ProseMirror h6 {
color: var(--color-text-primary) !important;
}
.ProseMirror h4 {
font-size: 1.25rem !important;
}
.ProseMirror h5 {
font-size: 1.125rem !important;
}
.ProseMirror h6 {
font-size: 1rem !important;
}
/* Professional Paragraph Styling */
.ProseMirror p {
margin: 1rem 0 !important;
color: #e5e5e5 !important;
text-align: left !important;
}
[data-theme="light"] .ProseMirror p {
color: var(--color-text-primary) !important;
}
/* Professional List Styling */
.ProseMirror ul,
.ProseMirror ol {
margin: 1rem 0 !important;
padding-left: 2rem !important;
color: #e5e5e5 !important;
}
[data-theme="light"] .ProseMirror ul,
[data-theme="light"] .ProseMirror ol {
color: var(--color-text-primary) !important;
}
/* Only remove list styling from ordered lists to prevent duplicate numbering */
.ProseMirror ol {
list-style: none !important;
counter-reset: none !important;
}
/* Keep default list styling for unordered lists (bullets) */
.ProseMirror ul {
list-style-type: disc !important;
}
/* Task list specific styles */
.ProseMirror ul[data-type='taskList'] {
list-style: none !important;
margin-left: 0 !important;
padding: 0 !important;
}
.ProseMirror ul[data-type='taskList'] li {
align-items: center !important;
display: flex !important;
}
.ProseMirror ul[data-type='taskList'] li > label {
flex: 0 0 auto !important;
margin-right: 0.5rem !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
user-select: none !important;
display: flex !important;
align-items: center !important;
height: 1.6em !important;
}
.ProseMirror ul[data-type='taskList'] li > div {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.ProseMirror ul[data-type='taskList'] li > div > p {
margin: 0 !important;
line-height: 1.6 !important;
}
.ProseMirror ul[data-type='taskList'] input[type='checkbox'] {
cursor: pointer !important;
margin: 0 !important;
vertical-align: middle !important;
width: 1em !important;
height: 1em !important;
}
.ProseMirror ul[data-type='taskList'] ul[data-type='taskList'] {
margin: 0.5rem 0 0.5rem 1.5rem !important;
}
.ProseMirror li {
margin: 0.25rem 0 !important;
color: #e5e5e5 !important;
}
[data-theme="light"] .ProseMirror li {
color: var(--color-text-primary) !important;
}
/* COMPLETELY remove ::before content from ALL ordered list items with highest specificity */
.ProseMirror ol li::before,
.ProseMirror ol > li::before,
.ProseMirror div ol li::before,
body .ProseMirror ol li::before {
display: none !important;
content: none !important;
visibility: hidden !important;
}
/* Also target any nested ordered lists */
.ProseMirror ol ol li::before,
.ProseMirror ol li ol li::before {
display: none !important;
content: none !important;
visibility: hidden !important;
}
/* Remove ::before pseudo-elements for headings inside list items */
.ProseMirror li h1::before,
.ProseMirror li h2::before,
.ProseMirror li h3::before,
.ProseMirror li h4::before,
.ProseMirror li h5::before,
.ProseMirror li h6::before {
display: none !important;
content: none !important;
}
/* Ensure proper styling for headings within lists */
.ProseMirror li h1,
.ProseMirror li h2,
.ProseMirror li h3,
.ProseMirror li h4,
.ProseMirror li h5,
.ProseMirror li h6 {
margin: 0.5rem 0 !important;
padding: 0 !important;
border: none !important;
}
/* Professional Table Styling */
.ProseMirror table {
width: 100% !important;
border-collapse: collapse !important;
margin: 0.75rem 0 !important;
border: 1px solid rgba(229, 229, 229, 0.3) !important;
border-radius: 4px !important;
overflow: hidden !important;
}
[data-theme="light"] .ProseMirror table {
border: 1px solid var(--color-border-primary) !important;
}
.ProseMirror th,
.ProseMirror td {
border: 1px solid rgba(229, 229, 229, 0.3) !important;
padding: 12px !important;
text-align: left !important;
box-sizing: border-box !important;
min-width: 1em !important;
position: relative !important;
vertical-align: top !important;
color: #e5e5e5 !important;
}
[data-theme="light"] .ProseMirror th,
[data-theme="light"] .ProseMirror td {
border: 1px solid var(--color-border-primary) !important;
color: var(--color-text-primary) !important;
}
.ProseMirror th {
background-color: rgba(248, 249, 250, 0.1) !important;
font-weight: 600 !important;
color: #f3f4f6 !important;
}
[data-theme="light"] .ProseMirror th {
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-primary) !important;
}
.ProseMirror tr:nth-child(even) {
background-color: rgba(248, 249, 250, 0.05) !important;
}
[data-theme="light"] .ProseMirror tr:nth-child(even) {
background-color: var(--color-bg-hover) !important;
}
/* Professional Blockquote Styling */
.ProseMirror blockquote {
border-left: 4px solid rgba(229, 229, 229, 0.4) !important;
margin: 1.5rem 0 !important;
padding: 0.5rem 0 0.5rem 1.5rem !important;
font-style: italic !important;
color: #d1d5db !important;
background: rgba(0, 0, 0, 0.1) !important;
border-radius: 0 4px 4px 0 !important;
}
[data-theme="light"] .ProseMirror blockquote {
border-left: 4px solid var(--color-brand-primary) !important;
color: var(--color-text-secondary) !important;
background: var(--color-bg-hover) !important;
}
/* Professional Text Formatting */
.ProseMirror strong {
font-weight: 600 !important;
color: #f9fafb !important;
}
[data-theme="light"] .ProseMirror strong {
color: var(--color-text-primary) !important;
font-weight: 700 !important;
}
.ProseMirror em {
font-style: italic !important;
color: #e5e7eb !important;
}
[data-theme="light"] .ProseMirror em {
color: var(--color-text-secondary) !important;
}
.ProseMirror a {
color: #60a5fa !important;
text-decoration: underline !important;
}
[data-theme="light"] .ProseMirror a {
color: var(--color-brand-primary) !important;
}
.ProseMirror a:hover {
color: #93c5fd !important;
}
[data-theme="light"] .ProseMirror a:hover {
color: var(--color-brand-secondary) !important;
}
/* Professional Code Styling */
.ProseMirror code {
background-color: #1a1a1a !important;
padding: 2px 6px !important;
border-radius: 3px !important;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
font-size: 0.9em !important;
color: #fbbf24 !important;
border: 1px solid rgba(229, 229, 229, 0.2) !important;
}
[data-theme="light"] .ProseMirror code {
background-color: var(--color-code-bg) !important;
color: var(--color-text-primary) !important;
border: 1px solid var(--color-border-primary) !important;
}
.ProseMirror pre {
background-color: #1a1a1a !important;
border: 1px solid rgba(229, 229, 229, 0.2) !important;
border-radius: 4px !important;
padding: 1rem !important;
overflow-x: auto !important;
margin: 1.5rem 0 !important;
}
[data-theme="light"] .ProseMirror pre {
background-color: var(--color-code-bg) !important;
border: 1px solid var(--color-border-primary) !important;
}
.ProseMirror pre code {
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
border: none !important;
color: #e5e7eb !important;
}
[data-theme="light"] .ProseMirror pre code {
color: var(--color-text-primary) !important;
}
/* Use GitHub diff highlight colors */
.ProseMirror .diff-added {
background-color: rgba(80, 220, 100, 0.5) !important; /* GitHub addition color */
padding: 0 2px;
margin: 0 1px;
border: none !important;
border-radius: 3px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
display: inline;
box-shadow: none !important;
outline: none !important;
}
.ProseMirror .diff-deleted {
background-color: rgba(255, 100, 100, 0.5) !important; /* GitHub deletion color */
text-decoration: line-through;
padding: 0 2px;
margin: 0 1px;
border: none !important;
border-radius: 3px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
display: inline;
color: #e24329;
box-shadow: none !important;
outline: none !important;
}
/* Remove hover effects */
.ProseMirror .diff-added:hover,
.ProseMirror .diff-deleted:hover {
/* No special hover styles */
}
.ProseMirror .selectedCell:after {
background: rgba(59, 130, 246, 0.3);
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
position: absolute;
z-index: 2;
}
.ProseMirror .column-resize-handle {
background-color: #3b82f6;
bottom: -2px;
position: absolute;
right: -2px;
top: 0;
width: 4px;
pointer-events: none;
}
.ProseMirror .tableWrapper {
overflow-x: auto;
margin: 8px 0;
}
.ProseMirror .resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}
.material-icons-small {
font-size: 18px;
line-height: 1;
}
/* Resizable Image Styles */
.ProseMirror .image-resizer {
display: inline-block;
position: relative;
max-width: 100%;
}
.ProseMirror .image-resizer img,
.ProseMirror .editor-image {
max-width: 100%;
height: auto;
border-radius: 8px;
transition: box-shadow 0.2s ease;
}
/* Handle broken images gracefully */
.ProseMirror img {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.ProseMirror img[src=""],
.ProseMirror img:not([src]) {
display: inline-block;
width: 200px;
height: 150px;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%),
linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
content: '🖼️ Image loading...';
text-align: center;
line-height: 150px;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
}
.ProseMirror .image-resizer:hover img {
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.ProseMirror .image-resizer .resize-handle {
position: absolute;
width: 12px;
height: 12px;
background: #3b82f6;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
cursor: nw-resize;
opacity: 0;
transition: opacity 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
/* Ensure handles are completely hidden by default */
visibility: hidden;
pointer-events: none;
}
.ProseMirror .image-resizer:hover .resize-handle,
.ProseMirror .image-resizer.selected .resize-handle {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Prevent resize handles from appearing during content animations */
.content-animating .ProseMirror .image-resizer .resize-handle,
.content-refresh-fade-out .ProseMirror .image-resizer .resize-handle,
.content-refresh-fade-in .ProseMirror .image-resizer .resize-handle {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.ProseMirror .image-resizer .resize-handle.nw {
top: -6px;
left: -6px;
cursor: nw-resize;
}
.ProseMirror .image-resizer .resize-handle.ne {
top: -6px;
right: -6px;
cursor: ne-resize;
}
.ProseMirror .image-resizer .resize-handle.sw {
bottom: -6px;
left: -6px;
cursor: sw-resize;
}
.ProseMirror .image-resizer .resize-handle.se {
bottom: -6px;
right: -6px;
cursor: se-resize;
}
/* Image selection outline */
.ProseMirror .image-resizer.selected img {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Loading state for images */
.ProseMirror .image-resizer img[src=""] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Dark mode adjustments for images */
@media (prefers-color-scheme: dark) {
.ProseMirror .image-resizer img[src=""] {
background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
background-size: 200% 100%;
}
}
/* Image Container Styles (for resizable images) */
.ProseMirror .image-container {
position: relative;
display: inline-block;
max-width: 100%;
margin: 16px 0;
padding: 0; /* 使用outline无需padding */
box-sizing: border-box;
}
/* Image selection outline - 使用:has()检测子元素 */
.ProseMirror .image-container:has(img.ProseMirror-selectednode),
.ProseMirror .image-container:has(.editor-image.ProseMirror-selectednode) {
outline: 3px solid var(--color-brand-secondary, var(--color-brand-primary));
outline-offset: 2px;
border-radius: 6px;
}
/* 移除img上的outline */
.ProseMirror .image-container img.ProseMirror-selectednode,
.ProseMirror .image-container .editor-image.ProseMirror-selectednode {
outline: none !important;
}
.ProseMirror .image-container img {
display: block;
max-width: 100%;
height: auto;
}
.ProseMirror .image-container:hover .resize-handle {
display: block !important;
}
/* Material Icons support */
.material-icons-outlined {
font-family: 'Material Icons Outlined', 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Inline AI suggestion styles - Enhanced for Cursor/Copilot-like UX */
[data-v-5afde580] .ai-suggestion-inline {
color: #6b7280 !important;
font-style: italic !important;
opacity: 0.5 !important;
pointer-events: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
user-select: none !important;
transition: opacity 0.3s ease-in-out, color 0.2s ease-in-out;
position: relative;
}
/* Dark mode support for better visibility */
[data-v-5afde580] .dark .ai-suggestion-inline {
color: #9ca3af !important;
}
/* Enhanced visibility when editor is focused - like Copilot */
[data-v-5afde580] .tiptap:focus .ai-suggestion-inline {
opacity: 0.65;
}
/* Smooth fade-in animation for new suggestions */
@keyframes suggestion-fade-in-5afde580 {
from {
opacity: 0;
transform: translateX(-2px);
}
to {
opacity: 0.5;
transform: translateX(0);
}
}
/* Subtle breathing effect - more professional than aggressive */
@keyframes suggestion-breathe-5afde580 {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 0.7;
}
}
[data-v-5afde580] .ai-suggestion-inline {
animation: suggestion-fade-in-5afde580 0.2s ease-out,suggestion-breathe-5afde580 4s ease-in-out 0.5s infinite;
}
/* Optional: Add a subtle indicator for keyboard shortcut hint */
[data-v-5afde580] .ai-suggestion-inline::after {
content: '';
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
}
/* TipTap Placeholder styles for AI autocomplete (fallback for empty paragraphs) */
[data-v-5afde580] .tiptap p.is-editor-empty:first-child::before {
color: #6b7280;
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
font-style: italic;
opacity: 0.7;
}
[data-v-5afde580] .tiptap p.is-empty::before {
color: #6b7280;
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
font-style: italic;
opacity: 0.7;
}
/* Enhanced placeholder styling for AI suggestions */
[data-v-5afde580] .tiptap[data-placeholder] {
position: relative;
}
[data-v-5afde580] .tiptap .is-editor-empty::before {
background: linear-gradient(90deg, #6b7280, #9ca3af);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: placeholder-glow-5afde580 2s ease-in-out infinite;
}
@keyframes placeholder-glow-5afde580 {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 0.9;
}
}
/* Suggestion hint styling */
[data-v-5afde580] .tiptap .is-empty::before {
transition: opacity 0.2s ease-in-out;
}
[data-v-5afde580] .tiptap:focus .is-empty::before {
opacity: 0.5;
}
/* Responsive placeholder text */
@media (max-width: 640px) {
[data-v-5afde580] .tiptap p.is-editor-empty:first-child::before,[data-v-5afde580] .tiptap p.is-empty::before {
font-size: 0.9em;
}
[data-v-5afde580] .ai-suggestion-inline {
font-size: 0.9em;
}
}
.handsontable-container[data-v-3ac77763] {
height: 100%;
width: 100%;
}
.data-editor[data-v-67b9407c] {
display: flex;
flex-direction: column;
height: 100%;
background: var(--bg-primary);
}
.loading-container[data-v-67b9407c],
.error-container[data-v-67b9407c] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 40px;
text-align: center;
}
.loading-spinner[data-v-67b9407c] {
width: 40px;
height: 40px;
border: 4px solid var(--border-color);
border-top-color: var(--accent-color);
border-radius: 50%;
animation: spin-67b9407c 1s linear infinite;
margin-bottom: 16px;
}
@keyframes spin-67b9407c {
to { transform: rotate(360deg);
}
}
.loading-container p[data-v-67b9407c] {
color: var(--text-secondary);
font-size: 14px;
}
.error-container[data-v-67b9407c] {
color: var(--error-color, #ef4444);
}
.error-icon[data-v-67b9407c] {
font-size: 48px;
margin-bottom: 16px;
}
.error-container h3[data-v-67b9407c] {
margin: 0 0 8px 0;
font-size: 18px;
}
.error-container p[data-v-67b9407c] {
margin: 0 0 16px 0;
color: var(--text-secondary);
}
.retry-btn[data-v-67b9407c] {
padding: 8px 16px;
background: var(--accent-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
.retry-btn[data-v-67b9407c]:hover {
opacity: 0.9;
}
.editor-container[data-v-67b9407c] {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
padding: 0 24px;
}
.table-wrapper[data-v-67b9407c] {
flex: 1;
overflow: hidden;
min-height: 0;
padding-bottom: 24px;
}
.sheet-tabs[data-v-67b9407c] {
display: flex;
gap: 2px;
padding: 4px 0;
margin: 16px 0 8px 0;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
overflow-x: auto;
flex-shrink: 0;
}
.sheet-tab[data-v-67b9407c] {
padding: 6px 12px;
background: transparent;
color: var(--text-secondary);
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 12px;
white-space: nowrap;
transition: all 0.2s;
}
.sheet-tab[data-v-67b9407c]:hover {
color: var(--text-primary);
background: var(--bg-hover);
border-radius: 4px 4px 0 0;
}
.sheet-tab.active[data-v-67b9407c] {
color: var(--accent-color);
border-bottom-color: var(--accent-color);
font-weight: 600;
}
.empty-state[data-v-67b9407c] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: var(--text-tertiary);
}
.empty-icon[data-v-67b9407c] {
font-size: 64px;
margin-bottom: 16px;
opacity: 0.5;
}
.empty-state h3[data-v-67b9407c] {
margin: 0 0 8px 0;
font-size: 18px;
color: var(--text-secondary);
}
.empty-state p[data-v-67b9407c] {
margin: 0;
font-size: 14px;
}
/* Auto-scale container and preview */
.html-preview[data-v-a5ddfdb3] {
display: inline-block;
transform-origin: center center;
transition: transform 0.3s ease;
pointer-events: auto;
position: relative;
}
/* Ensure buttons and interactive elements are clickable */
.html-preview[data-v-a5ddfdb3] button,
.html-preview[data-v-a5ddfdb3] .nav-btn {
pointer-events: auto !important;
cursor: pointer !important;
}
/* Fix click area for scaled content */
.html-preview[data-v-a5ddfdb3] * {
pointer-events: auto;
}
/* Edit mode cursor */
.html-preview.edit-mode[data-v-a5ddfdb3] [draggable="true"] {
cursor: move;
transition: all 0.2s ease;
}
/* Hover effect */
.html-preview[data-v-a5ddfdb3] .hovering {
outline: 2px dashed var(--color-brand-primary) !important;
outline-offset: 2px;
background: var(--color-brand-primary-05) !important;
}
/* Selected element */
.html-preview[data-v-a5ddfdb3] .selected {
outline: 2px solid var(--color-brand-primary) !important;
outline-offset: 2px;
background: var(--color-brand-primary-10) !important;
}
/* Dragging element */
.html-preview[data-v-a5ddfdb3] .dragging {
opacity: 0.5;
cursor: grabbing !important;
}
/* Drag over target */
.html-preview[data-v-a5ddfdb3] .drag-over {
outline: 2px solid var(--color-success) !important;
outline-offset: 2px;
background: var(--color-success-bg) !important;
}
/* Make sure nested elements don't interfere with drag - only during active dragging */
.html-preview[data-v-a5ddfdb3] .dragging * {
pointer-events: none;
}
/* Editing state */
.html-preview[data-v-a5ddfdb3] .editing,
.html-preview[data-v-a5ddfdb3] [contenteditable="true"] {
outline: 2px solid var(--color-brand-primary) !important;
outline-offset: 2px;
background: transparent !important;
background-color: transparent !important;
cursor: text !important;
min-height: 1.5em;
}
.html-preview[data-v-a5ddfdb3] .editing:focus,
.html-preview[data-v-a5ddfdb3] [contenteditable="true"]:focus {
outline: 3px solid var(--color-brand-primary) !important;
box-shadow: 0 0 0 4px var(--color-brand-primary-10);
background: transparent !important;
background-color: transparent !important;
}
/* Prevent editing state from interfering with nested elements */
.html-preview[data-v-a5ddfdb3] .editing * {
pointer-events: auto;
}
/* Override any browser defaults for contenteditable */
.html-preview[data-v-a5ddfdb3] [contenteditable="true"] {
-webkit-user-modify: read-write-plaintext-only;
}
.html-preview[data-v-a5ddfdb3] [contenteditable="true"]:focus {
outline-color: var(--color-brand-primary) !important;
}
/* Floating Controls - Ensure visibility on any background */
.floating-controls[data-v-a5ddfdb3] {
/* No shadows for a clean look */
}
.floating-badge[data-v-a5ddfdb3] {
font-size: 12px;
font-weight: 500;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
white-space: nowrap;
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.floating-button[data-v-a5ddfdb3] {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
.floating-icon-button[data-v-a5ddfdb3] {
background: rgba(255, 255, 255, 0.95) !important;
color: #374151 !important;
}
.floating-icon-button.mode-active[data-v-a5ddfdb3] {
background: rgba(238, 242, 255, 0.95) !important;
border-color: rgba(55, 65, 81, 0.3) !important;
}
/* Status Badge Color Variants */
.status-badge[data-v-a5ddfdb3] {
font-size: 12px;
font-weight: 500;
color: #374151;
white-space: nowrap;
}
.status-saved[data-v-a5ddfdb3] {
color: var(--color-brand-secondary);
}
.status-saving[data-v-a5ddfdb3] {
color: #2563eb;
}
.status-unsaved[data-v-a5ddfdb3] {
color: #dc2626;
}
@keyframes spin-b73e14ab {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin[data-v-b73e14ab] {
animation: spin-b73e14ab 1s linear infinite;
}
.modal-overlay[data-v-4da6a62f] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 1rem;
}
.modal-container[data-v-4da6a62f] {
background: var(--color-bg-elevated, #1d1d1f);
border: 1px solid var(--color-border-primary, rgba(255, 255, 255, 0.1));
border-radius: 16px;
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.4),
0 10px 10px -5px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-header[data-v-4da6a62f] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}
.modal-title[data-v-4da6a62f] {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text-primary, #ffffff);
margin: 0;
}
.modal-close[data-v-4da6a62f] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
cursor: pointer;
border-radius: 6px;
transition: all 0.15s ease;
}
.modal-close[data-v-4da6a62f]:hover {
background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
color: var(--color-text-primary, #ffffff);
}
.modal-close .material-icons-outlined[data-v-4da6a62f] {
font-size: 20px;
}
.modal-body[data-v-4da6a62f] {
padding: 1.5rem;
overflow-y: auto;
flex: 1;
}
.input-group[data-v-4da6a62f] {
margin-bottom: 1.5rem;
}
.input-label[data-v-4da6a62f] {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
margin-bottom: 0.5rem;
}
.input-field[data-v-4da6a62f] {
width: 100%;
padding: 0.75rem;
background: var(--color-bg-primary, rgba(255, 255, 255, 0.05));
border: 1px solid var(--color-border-primary, rgba(255, 255, 255, 0.1));
border-radius: 8px;
color: var(--color-text-primary, #ffffff);
font-size: 0.9375rem;
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
line-height: 1.5;
resize: vertical;
transition: all 0.15s ease;
}
.input-field[data-v-4da6a62f]:focus {
outline: none;
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 3px var(--color-brand-primary-10);
}
.input-field[data-v-4da6a62f]::-moz-placeholder {
color: var(--color-text-tertiary, rgba(255, 255, 255, 0.4));
}
.input-field[data-v-4da6a62f]::placeholder {
color: var(--color-text-tertiary, rgba(255, 255, 255, 0.4));
}
.input-hint[data-v-4da6a62f] {
font-size: 0.75rem;
color: var(--color-text-tertiary, rgba(255, 255, 255, 0.5));
margin-top: 0.5rem;
}
.preview-section[data-v-4da6a62f] {
margin-top: 1.5rem;
}
.preview-container[data-v-4da6a62f] {
padding: 1.5rem;
background: var(--color-bg-primary, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
border-radius: 8px;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.preview-content[data-v-4da6a62f] {
color: var(--color-text-primary, #ffffff);
font-size: 1.125rem;
}
.modal-footer[data-v-4da6a62f] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}
.btn[data-v-4da6a62f] {
padding: 0.625rem 1.25rem;
border: none;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn[data-v-4da6a62f]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-secondary[data-v-4da6a62f] {
background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
color: var(--color-text-primary, #ffffff);
}
.btn-secondary[data-v-4da6a62f]:hover:not(:disabled) {
background: var(--color-bg-active, rgba(255, 255, 255, 0.08));
}
.btn-primary[data-v-4da6a62f] {
background: var(--color-brand-primary);
color: #ffffff;
}
.btn-primary[data-v-4da6a62f]:hover:not(:disabled) {
background: var(--color-brand-secondary);
transform: translateY(-1px);
box-shadow: 0 4px 8px var(--color-brand-primary-30);
}
/* Animations */
.modal-enter-active[data-v-4da6a62f],
.modal-leave-active[data-v-4da6a62f] {
transition: opacity 0.2s ease;
}
.modal-enter-active .modal-container[data-v-4da6a62f],
.modal-leave-active .modal-container[data-v-4da6a62f] {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.modal-enter-from[data-v-4da6a62f],
.modal-leave-to[data-v-4da6a62f] {
opacity: 0;
}
.modal-enter-from .modal-container[data-v-4da6a62f],
.modal-leave-to .modal-container[data-v-4da6a62f] {
transform: scale(0.95) translateY(-20px);
opacity: 0;
}
/* Material Icons */
.material-icons-outlined[data-v-4da6a62f] {
font-family: 'Material Icons Outlined', 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Responsive */
@media (max-width: 640px) {
.modal-container[data-v-4da6a62f] {
max-width: 100%;
border-radius: 12px;
}
.modal-header[data-v-4da6a62f],
.modal-body[data-v-4da6a62f],
.modal-footer[data-v-4da6a62f] {
padding: 1rem;
}
}
/* Light theme */
[data-theme="light"] .modal-overlay[data-v-4da6a62f] {
background: rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .modal-container[data-v-4da6a62f] {
background: var(--color-bg-elevated);
border-color: var(--color-border-subtle);
}
[data-theme="light"] .input-field[data-v-4da6a62f] {
background: var(--color-bg-primary);
border-color: var(--color-border-primary);
}
[data-theme="light"] .preview-container[data-v-4da6a62f] {
background: var(--color-bg-secondary);
border-color: var(--color-border-subtle);
}
/* Minimalist Card Design */
.document-card[data-v-38df3222] {
position: relative;
cursor: pointer;
overflow: visible;
width: 100%;
aspect-ratio: 4 / 3; /* Narrower 4:3 ratio for document cards */
max-width: 260px;
min-width: 200px;
/* Clean, minimal background */
background: transparent;
/* Subtle border for definition */
border: 1px solid rgba(255, 255, 255, 0.1);
/* Soft rounding */
border-radius: 12px;
/* Smooth transitions for hover effects */
transition: all 0.3s ease;
/* Establish stacking context for menu positioning */
z-index: 1;
}
.document-card[data-v-38df3222]:hover {
border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
z-index: 2;
}
/* Document Preview minimalist design */
.document-preview[data-v-38df3222] {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
}
/* Stylized preview elements with subtle opacity */
.preview-header[data-v-38df3222] {
margin-bottom: 1rem;
height: 1rem;
width: 75%;
border-radius: 0.125rem;
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.preview-line[data-v-38df3222] {
margin-bottom: 0.5rem;
height: 0.5rem;
border-radius: 0.125rem;
background: rgba(255, 255, 255, 0.2);
}
.preview-line-full[data-v-38df3222] {
width: 100%;
}
.preview-line-partial[data-v-38df3222] {
width: 83.333333%;
}
/* Real content preview */
.preview-content[data-v-38df3222] {
padding: 20px;
padding-bottom: 80px; /* Space for title overlay */
font-size: 0.75rem;
line-height: 1.4;
color: rgba(255, 255, 255, 0.7);
white-space: pre-wrap;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
/* Gradient overlay for title - lighter and more elegant */
.gradient-overlay[data-v-38df3222] {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 120px;
background: linear-gradient(
to top,
rgba(0,0,0,0.7) 0%,
rgba(0,0,0,0.4) 40%,
rgba(0,0,0,0.15) 70%,
transparent 100%
);
}
/* Title overlay at bottom */
.document-title-overlay[data-v-38df3222] {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
z-index: 15;
}
.title-text[data-v-38df3222] {
margin-bottom: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 600;
color: var(--text-primary);
/* Enhanced text shadow for better readability on lighter gradient */
text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 2px 6px rgba(0,0,0,0.4);
}
.meta-text[data-v-38df3222] {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
color: var(--text-secondary);
text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.3);
}
.meta-text .material-icons[data-v-38df3222] {
font-size: 0.875rem;
line-height: 1.25rem;
}
/* File type badge with glass style */
.file-type-badge[data-v-38df3222] {
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
border-radius: 0.25rem;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
line-height: 1rem;
font-weight: 500;
color: var(--text-primary);
background: rgba(59, 130, 246, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
z-index: 10;
font-size: 0.65rem;
}
/* Simple menu button */
.menu-button[data-v-38df3222] {
position: absolute;
display: flex;
height: 2rem;
width: 2rem;
align-items: center;
justify-content: center;
border-radius: 9999px;
color: var(--text-primary);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
z-index: 999;
}
.menu-button[data-v-38df3222]:hover {
background: rgba(0, 0, 0, 0.8);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.menu-button .material-icons[data-v-38df3222] {
font-size: 1rem;
}
/* Dropdown menu positioned relative to card */
.dropdown-menu[data-v-38df3222] {
position: absolute;
width: 11rem;
top: 40px;
right: 8px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
padding-top: 0.5rem;
padding-bottom: 0.5rem;
z-index: 1000;
}
.dropdown-item[data-v-38df3222] {
display: flex;
width: 100%;
align-items: center;
gap: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--text-primary);
}
.dropdown-item[data-v-38df3222]:hover {
background-color: rgb(243 244 246 / 0.5);
}
.dropdown-item[data-v-38df3222] {
text-align: left;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
border: none;
background: none;
}
.dropdown-item[data-v-38df3222]:hover {
color: var(--text-primary);
background: rgba(0, 0, 0, 0.05);
}
.dropdown-item .material-icons[data-v-38df3222] {
font-size: 1rem;
}
.dropdown-divider[data-v-38df3222] {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
border-top-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.delete-item[data-v-38df3222] {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.delete-item[data-v-38df3222]:hover {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity, 1));
background: rgba(239, 68, 68, 0.1);
}
/* Menu button animation */
.menu-fade-enter-active[data-v-38df3222],
.menu-fade-leave-active[data-v-38df3222] {
transition: all 0.15s ease;
}
.menu-fade-enter-from[data-v-38df3222],
.menu-fade-leave-to[data-v-38df3222] {
opacity: 0;
transform: scale(0.8);
}
/* Dropdown animation */
.dropdown-enter-active[data-v-38df3222],
.dropdown-leave-active[data-v-38df3222] {
transition: all 0.2s ease;
}
.dropdown-enter-from[data-v-38df3222],
.dropdown-leave-to[data-v-38df3222] {
opacity: 0;
transform: translateY(-10px);
}
/* Responsive adjustments for different card sizes */
@media (max-width: 480px) {
.document-card[data-v-38df3222] {
min-width: 180px;
}
.preview-content[data-v-38df3222] {
padding: 16px;
padding-bottom: 70px;
font-size: 0.7rem;
-webkit-line-clamp: 4;
}
.title-text[data-v-38df3222] {
font-size: 0.875rem;
line-height: 1.25rem;
}
.gradient-overlay[data-v-38df3222] {
height: 100px;
}
}
@media (min-width: 1441px) {
.preview-content[data-v-38df3222] {
padding: 24px;
padding-bottom: 90px;
font-size: 0.8rem;
-webkit-line-clamp: 7;
}
.title-text[data-v-38df3222] {
font-size: 1.125rem;
line-height: 1.75rem;
}
.gradient-overlay[data-v-38df3222] {
height: 130px;
}
}
/* Light mode styles */
[data-theme="light"] .document-card[data-v-38df3222] {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border-subtle);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .document-card[data-v-38df3222]:hover {
border: 1px solid var(--color-border-primary);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
[data-theme="light"] .document-preview[data-v-38df3222] {
background: var(--color-bg-secondary);
}
[data-theme="light"] .preview-header[data-v-38df3222] {
background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .preview-line[data-v-38df3222] {
background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .preview-content[data-v-38df3222] {
color: var(--color-text-secondary);
}
[data-theme="light"] .gradient-overlay[data-v-38df3222] {
background: linear-gradient(
to top,
rgba(255,255,255,0.95) 0%,
rgba(255,255,255,0.8) 40%,
rgba(255,255,255,0.4) 70%,
transparent 100%
);
}
[data-theme="light"] .title-text[data-v-38df3222] {
color: var(--color-text-primary);
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
[data-theme="light"] .meta-text[data-v-38df3222] {
color: var(--color-text-secondary);
text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
[data-theme="light"] .file-type-badge[data-v-38df3222] {
background: var(--color-brand-primary);
color: white;
border: 1px solid var(--color-brand-primary);
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}
[data-theme="light"] .menu-button[data-v-38df3222] {
background: rgba(0, 0, 0, 0.08);
color: var(--color-text-primary);
border: 1px solid var(--color-border-subtle);
}
[data-theme="light"] .menu-button[data-v-38df3222]:hover {
background: rgba(0, 0, 0, 0.12);
border-color: var(--color-border-primary);
}
[data-theme="light"] .dropdown-menu[data-v-38df3222] {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border-primary);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .dropdown-item[data-v-38df3222] {
color: var(--color-text-primary);
}
[data-theme="light"] .dropdown-item[data-v-38df3222]:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
[data-theme="light"] .dropdown-divider[data-v-38df3222] {
border-color: var(--color-border-primary);
}
[data-theme="light"] .delete-item[data-v-38df3222] {
color: var(--color-error);
}
[data-theme="light"] .delete-item[data-v-38df3222]:hover {
color: var(--color-error);
background: var(--color-error-bg);
}
/* Dark mode support for minimalist design */
@media (prefers-color-scheme: dark) {
.document-card[data-v-38df3222] {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.document-card[data-v-38df3222]:hover {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.preview-header[data-v-38df3222] {
background: rgba(255, 255, 255, 0.15);
}
.preview-line[data-v-38df3222] {
background: rgba(255, 255, 255, 0.1);
}
.gradient-overlay[data-v-38df3222] {
background: linear-gradient(
to top,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.45) 50%,
rgba(0,0,0,0.1) 75%,
transparent 100%
);
}
.file-type-badge[data-v-38df3222] {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.menu-button[data-v-38df3222] {
background: rgba(255, 255, 255, 0.15);
color: var(--text-secondary);
}
.menu-button[data-v-38df3222]:hover {
background: rgba(255, 255, 255, 0.25);
color: var(--text-primary);
}
.dropdown-menu[data-v-38df3222] {
background: rgba(30, 30, 30, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.dropdown-item[data-v-38df3222] {
color: var(--color-text-tertiary);
}
.dropdown-item[data-v-38df3222]:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.1);
}
.dropdown-divider[data-v-38df3222] {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.delete-item[data-v-38df3222] {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.delete-item[data-v-38df3222]:hover {
--tw-text-opacity: 1;
color: rgb(252 165 165 / var(--tw-text-opacity, 1));
background: rgba(239, 68, 68, 0.2);
}
}
.document-card-skeleton[data-v-b5289d79] {
width: 280px;
height: 320px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
position: relative;
overflow: hidden;
}
/* Skeleton shimmer animation */
.document-card-skeleton[data-v-b5289d79]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
animation: shimmer-b5289d79 2s infinite;
}
@keyframes shimmer-b5289d79 {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.skeleton-preview[data-v-b5289d79] {
padding: 24px;
height: 100%;
position: relative;
}
.skeleton-header[data-v-b5289d79] {
height: 16px;
width: 75%;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
margin-bottom: 16px;
}
.skeleton-line[data-v-b5289d79] {
height: 8px;
background: rgba(255, 255, 255, 0.08);
border-radius: 4px;
margin-bottom: 8px;
}
.skeleton-line-full[data-v-b5289d79] {
width: 100%;
}
.skeleton-line-partial[data-v-b5289d79] {
width: 83%;
}
.skeleton-overlay[data-v-b5289d79] {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
}
.skeleton-title[data-v-b5289d79] {
height: 20px;
width: 80%;
background: rgba(255, 255, 255, 0.15);
border-radius: 4px;
margin-bottom: 8px;
}
.skeleton-meta[data-v-b5289d79] {
height: 12px;
width: 60%;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.skeleton-badge[data-v-b5289d79] {
position: absolute;
bottom: 16px;
right: 16px;
width: 40px;
height: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
.document-card-skeleton[data-v-b5289d79] {
background: rgba(255, 255, 255, 0.02);
}
.skeleton-header[data-v-b5289d79] {
background: rgba(255, 255, 255, 0.05);
}
.skeleton-line[data-v-b5289d79] {
background: rgba(255, 255, 255, 0.03);
}
.skeleton-title[data-v-b5289d79] {
background: rgba(255, 255, 255, 0.08);
}
.skeleton-meta[data-v-b5289d79] {
background: rgba(255, 255, 255, 0.05);
}
.skeleton-badge[data-v-b5289d79] {
background: rgba(255, 255, 255, 0.05);
}
}
/* Clean background for professional look */
.liquid-background[data-v-1f8d34dc] {
background: linear-gradient(
135deg,
var(--color-bg-primary) 0%,
var(--color-bg-secondary) 50%,
var(--color-bg-primary) 100%
);
position: relative;
min-height: 100vh;
}
/* Session Container for container queries */
.session-container[data-v-1f8d34dc] {
container-type: inline-size;
container-name: session;
}
/* Main Layout Container */
.main-layout[data-v-1f8d34dc] {
display: flex;
flex-direction: column;
gap: 28px;
width: 100%;
}
/* Stacked variant no longer needed */
/* Simplified layout without sidebar */
/* Improve visual hierarchy with subtle background variations */
.session-documents[data-v-1f8d34dc] {
background: transparent;
border-radius: 16px;
padding: 0;
}
/* Session Documents Section - now uses full width */
.session-documents[data-v-1f8d34dc] {
flex: 1;
min-width: 0; /* Allow flex item to shrink */
padding: 0;
width: 100%;
}
.section-header[data-v-1f8d34dc] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding: 0;
}
@container session (min-width: 800px) {
.section-header[data-v-1f8d34dc] {
margin-bottom: 28px;
}
}
.section-title[data-v-1f8d34dc] {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-text-primary);
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
margin: 0;
}
/* Light mode text shadow adjustment */
[data-theme="light"] .section-title[data-v-1f8d34dc] {
text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.header-actions[data-v-1f8d34dc] {
display: flex;
align-items: center;
gap: 8px;
}
.add-document-btn[data-v-1f8d34dc] {
width: 44px;
height: 44px;
background: transparent;
border: none;
border-radius: 8px;
color: var(--color-text-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
/* Light mode button styling */
[data-theme="light"] .add-document-btn[data-v-1f8d34dc] {
color: var(--color-text-primary);
background: rgba(0, 0, 0, 0.02);
border: 1px solid var(--color-border-subtle);
}
[data-theme="light"] .add-document-btn[data-v-1f8d34dc]:hover:not(:disabled) {
background: var(--color-bg-hover);
border-color: var(--color-border-primary);
}
.add-document-btn[data-v-1f8d34dc]:hover:not(:disabled) {
background: var(--color-bg-hover);
}
.add-document-btn[data-v-1f8d34dc]:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.add-document-btn .material-icons[data-v-1f8d34dc] {
font-size: 1.25rem;
}
.documents-grid[data-v-1f8d34dc] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
min-height: 200px;
padding: 0;
}
/* Container-based responsive grid following 12-column system */
@container session (max-width: 480px) {
.documents-grid[data-v-1f8d34dc] {
grid-template-columns: 1fr;
gap: 12px;
}
}
@container session (min-width: 481px) and (max-width: 768px) {
.documents-grid[data-v-1f8d34dc] {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
}
@container session (min-width: 769px) and (max-width: 1024px) {
.documents-grid[data-v-1f8d34dc] {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
}
@container session (min-width: 1025px) and (max-width: 1440px) {
.documents-grid[data-v-1f8d34dc] {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 18px;
}
}
@container session (min-width: 1441px) {
.documents-grid[data-v-1f8d34dc] {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
}
/* Empty State */
.empty-state[data-v-1f8d34dc] {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 32px;
text-align: center;
}
.empty-icon[data-v-1f8d34dc] {
width: 80px;
height: 80px;
background: var(--color-bg-hover);
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
[data-theme="light"] .empty-icon[data-v-1f8d34dc] {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-subtle);
}
.empty-icon .material-icons[data-v-1f8d34dc] {
font-size: 2.5rem;
color: var(--color-text-tertiary);
}
.empty-text[data-v-1f8d34dc] {
color: var(--color-text-secondary);
font-size: 1.125rem;
margin: 0 0 32px 0;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="light"] .empty-text[data-v-1f8d34dc] {
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.create-first-btn[data-v-1f8d34dc] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 32px;
background: rgba(var(--color-brand-primary), 0.8);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--color-border-subtle);
border-radius: 20px;
color: var(--color-text-primary);
font-weight: 600;
font-size: 1.125rem;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
cursor: pointer;
transition: all 0.3s ease;
}
[data-theme="light"] .create-first-btn[data-v-1f8d34dc] {
background: var(--color-brand-primary);
color: white;
text-shadow: none;
border: 1px solid var(--color-brand-primary);
}
[data-theme="light"] .create-first-btn[data-v-1f8d34dc]:hover:not(:disabled) {
background: var(--color-brand-secondary);
border-color: var(--color-brand-secondary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.create-first-btn[data-v-1f8d34dc]:hover:not(:disabled) {
background: var(--color-brand-primary);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(var(--color-brand-primary), 0.4);
}
.create-first-btn[data-v-1f8d34dc]:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Knowledge base functionality moved to WorkbenchSidebar */
/* Container-based responsive adjustments */
@container session (max-width: 500px) {
.section-title[data-v-1f8d34dc] {
font-size: 1.5rem;
}
.add-document-btn[data-v-1f8d34dc],
.workspace-menu-btn[data-v-1f8d34dc] {
width: 40px;
height: 40px;
}
.section-header[data-v-1f8d34dc] {
flex-direction: column;
gap: 16px;
align-items: stretch;
}
.header-actions[data-v-1f8d34dc] {
align-self: center;
}
}
.project-actions[data-v-c5b7b692] {
display: flex;
align-items: center;
}
/* Notion 风格侧边栏切换按钮 */
.sidebar-toggle-button[data-v-c5b7b692] {
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
}
.sidebar-toggle-button[data-v-c5b7b692]:hover {
background: var(--navbar-button-hover);
color: var(--color-text-primary);
}
.sidebar-toggle-button[data-v-c5b7b692]:active {
background: var(--navbar-button-active);
}
.sidebar-toggle-button.active[data-v-c5b7b692] {
color: var(--color-text-primary);
}
/* SVG 图标 */
.sidebar-toggle-button svg[data-v-c5b7b692] {
flex-shrink: 0;
}
.document-switcher[data-v-17459df6] {
display: flex;
align-items: center;
flex: 1;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Document Title Area */
.document-title-area[data-v-17459df6] {
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.title-display[data-v-17459df6] {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 12px;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
max-width: 100%;
min-width: 200px;
}
.document-title[data-v-17459df6] {
font-size: 15px;
font-weight: 500;
color: var(--color-text-primary);
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Status Indicators */
.status-indicators[data-v-17459df6] {
display: flex;
align-items: center;
gap: 8px;
}
.status-badge[data-v-17459df6] {
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-saved[data-v-17459df6] {
background: var(--color-brand-primary);
color: var(--text-primary);
}
.status-saving[data-v-17459df6] {
background: #f59e0b;
color: var(--text-primary);
}
.status-error[data-v-17459df6] {
background: #ef4444;
color: var(--text-primary);
}
/* Underline Indicator */
.underline-indicator[data-v-17459df6] {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
width: 80%;
height: 2px;
background: #60a5fa;
border-radius: 1px;
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
pointer-events: none;
}
/* Three-state underline logic */
.title-display:hover .underline-indicator[data-v-17459df6],
.document-switcher.is-active .title-display .underline-indicator[data-v-17459df6] {
transform: translateX(-50%) scaleX(1);
}
/* Edit Icon Container - always reserves space */
.edit-icon-container[data-v-17459df6] {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
position: relative;
}
/* Edit Icon */
.edit-icon[data-v-17459df6] {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #3f3f46;
border: none;
border-radius: 4px;
color: #e4e4e7;
cursor: pointer;
transition: all 150ms ease;
z-index: 10;
}
.edit-icon[data-v-17459df6]:hover {
background: #52525b;
transform: scale(1.05);
}
.edit-icon .material-icons[data-v-17459df6] {
font-size: 16px;
}
/* Title Editor */
.title-editor[data-v-17459df6] {
flex: 1;
display: flex;
justify-content: center;
}
.title-input[data-v-17459df6] {
width: 100%;
max-width: 400px;
padding: 8px 16px;
background: #18181b;
border: 2px solid #60a5fa;
border-radius: 8px;
color: #e4e4e7;
font-size: 15px;
font-weight: 500;
outline: none;
}
/* Document Dropdown Portal (teleported to body) */
.document-dropdown-portal[data-v-17459df6] {
background: #1a1a1a;
border: 1px solid #3f3f46;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
overflow: hidden;
max-height: 300px;
min-height: 60px;
position: relative;
}
/* Scroll indicators */
.document-dropdown-portal[data-v-17459df6]::before,
.document-dropdown-portal[data-v-17459df6]::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(to bottom, rgba(26, 26, 26, 0.9), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
}
.document-dropdown-portal[data-v-17459df6]::before {
top: 0;
background: linear-gradient(to bottom, rgba(26, 26, 26, 0.9), transparent);
}
.document-dropdown-portal[data-v-17459df6]::after {
bottom: 0;
background: linear-gradient(to top, rgba(26, 26, 26, 0.9), transparent);
}
/* Show scroll indicators when hovering and content is scrollable */
.document-dropdown-portal[data-v-17459df6]:hover::before {
opacity: 1;
}
.document-dropdown-portal[data-v-17459df6]:hover::after {
opacity: 1;
}
/* Legacy styles for absolute positioned dropdown (fallback) */
.document-dropdown[data-v-17459df6] {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #1a1a1a;
border: 1px solid #3f3f46;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
z-index: 10000;
overflow: hidden;
max-height: 300px;
min-height: 60px;
}
.dropdown-content[data-v-17459df6] {
padding: 8px;
}
.document-list[data-v-17459df6] {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 280px;
overflow-y: auto;
overflow-x: hidden;
}
/* Horizontal scrolling for narrow screens */
@media (max-width: 768px) {
.document-list[data-v-17459df6] {
flex-direction: row;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
padding: 8px 0 12px 0;
scrollbar-width: thin;
scrollbar-color: rgba(63, 63, 70, 0.6) transparent;
}
.document-list[data-v-17459df6]::-webkit-scrollbar {
height: 6px;
}
.document-list[data-v-17459df6]::-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
margin: 0 4px;
}
.document-list[data-v-17459df6]::-webkit-scrollbar-thumb {
background: rgba(63, 63, 70, 0.4);
border-radius: 3px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.document-list[data-v-17459df6]::-webkit-scrollbar-thumb:hover {
background: rgba(82, 82, 91, 0.7);
}
/* Mobile: Show scrollbar only when scrolling */
.document-dropdown-portal .document-list[data-v-17459df6]::-webkit-scrollbar-thumb {
background: transparent;
}
.document-dropdown-portal .document-list[data-v-17459df6]:hover::-webkit-scrollbar-thumb,
.document-dropdown-portal .document-list[data-v-17459df6]:active::-webkit-scrollbar-thumb {
background: rgba(63, 63, 70, 0.6);
}
}
.document-item[data-v-17459df6] {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 12px 16px;
background: transparent;
border: none;
border-radius: 8px;
color: #e4e4e7;
text-align: left;
cursor: pointer;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
min-width: 240px;
}
@media (max-width: 768px) {
.document-item[data-v-17459df6] {
min-width: 200px;
flex-shrink: 0;
}
}
.document-item[data-v-17459df6]:hover {
background: #27272a;
transform: translateY(-1px);
}
.document-item.current-document[data-v-17459df6] {
background: #27272a;
border: 1px solid #60a5fa;
}
.document-info[data-v-17459df6] {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.document-name[data-v-17459df6] {
font-size: 14px;
font-weight: 500;
color: #e4e4e7;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.document-meta[data-v-17459df6] {
font-size: 12px;
color: #a1a1aa;
}
.check-icon[data-v-17459df6] {
margin-left: 12px;
font-size: 18px;
color: #60a5fa;
flex-shrink: 0;
}
/* Dropdown animation */
.dropdown-enter-active[data-v-17459df6],
.dropdown-leave-active[data-v-17459df6] {
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-enter-from[data-v-17459df6],
.dropdown-leave-to[data-v-17459df6] {
opacity: 0;
transform: translateY(-8px) scale(0.98);
}
/* Edit Icon animations */
.edit-icon-enter-active[data-v-17459df6],
.edit-icon-leave-active[data-v-17459df6] {
transition: opacity 150ms ease, transform 150ms ease;
}
.edit-icon-enter-from[data-v-17459df6] {
opacity: 0;
transform: scale(0.8);
}
.edit-icon-leave-to[data-v-17459df6] {
opacity: 0;
transform: scale(0.8);
}
/* Elegant scrollbar styling */
.document-list[data-v-17459df6] {
scrollbar-width: thin;
scrollbar-color: rgba(63, 63, 70, 0.6) transparent;
}
.document-list[data-v-17459df6]::-webkit-scrollbar {
width: 8px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.document-list[data-v-17459df6]::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
margin: 4px 0;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
.document-list[data-v-17459df6]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,
rgba(63, 63, 70, 0.5) 0%,
rgba(63, 63, 70, 0.3) 50%,
rgba(63, 63, 70, 0.5) 100%);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.05);
background-clip: content-box;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.document-list[data-v-17459df6]::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg,
rgba(82, 82, 91, 0.8) 0%,
rgba(82, 82, 91, 0.6) 50%,
rgba(82, 82, 91, 0.8) 100%);
border-color: rgba(255, 255, 255, 0.1);
background-clip: content-box;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transform: scaleX(1.2);
}
.document-list[data-v-17459df6]::-webkit-scrollbar-thumb:active {
background: linear-gradient(180deg,
rgba(96, 165, 250, 0.7) 0%,
rgba(96, 165, 250, 0.5) 50%,
rgba(96, 165, 250, 0.7) 100%);
border-color: rgba(96, 165, 250, 0.3);
background-clip: content-box;
box-shadow: 0 3px 8px rgba(96, 165, 250, 0.4);
transform: scaleX(1.3);
}
/* Progressive scrollbar appearance */
.document-dropdown-portal .document-list[data-v-17459df6]::-webkit-scrollbar-thumb {
opacity: 0;
transform: scaleX(0.5);
}
.document-dropdown-portal:hover .document-list[data-v-17459df6]::-webkit-scrollbar-thumb {
opacity: 1;
transform: scaleX(1);
}
.document-dropdown-portal .document-list[data-v-17459df6]::-webkit-scrollbar-thumb:hover {
opacity: 1;
transform: scaleX(1.2);
}
.document-dropdown-portal .document-list[data-v-17459df6]::-webkit-scrollbar-thumb:active {
opacity: 1;
transform: scaleX(1.3);
}
/* Debug states */
.loading-state[data-v-17459df6],
.error-state[data-v-17459df6],
.empty-state[data-v-17459df6] {
padding: 16px;
text-align: center;
color: #a1a1aa;
font-size: 14px;
}
.error-state[data-v-17459df6] {
color: #ef4444;
}
/* ---------------- Light Mode Overrides ---------------- */
[data-theme="light"] .title-input[data-v-17459df6] {
background: var(--color-bg-elevated);
color: var(--color-text-primary);
border: 2px solid var(--color-brand-primary);
}
[data-theme="light"] .title-display .document-title[data-v-17459df6] {
color: var(--color-text-primary);
}
[data-theme="light"] .title-display .underline-indicator[data-v-17459df6] {
background: var(--color-brand-primary);
}
[data-theme="light"] .document-dropdown-portal[data-v-17459df6] {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border-primary);
box-shadow: var(--shadow-lg);
}
[data-theme="light"] .document-dropdown-portal[data-v-17459df6]::before,
[data-theme="light"] .document-dropdown-portal[data-v-17459df6]::after {
background: linear-gradient(to bottom, rgba(250, 250, 250, 0.9), transparent);
}
[data-theme="light"] .document-dropdown-portal[data-v-17459df6]::after {
background: linear-gradient(to top, rgba(250, 250, 250, 0.9), transparent);
}
[data-theme="light"] .document-item[data-v-17459df6] {
color: var(--color-text-primary);
}
[data-theme="light"] .document-item[data-v-17459df6]:hover {
background: var(--color-bg-hover);
}
[data-theme="light"] .document-item.current-document[data-v-17459df6] {
background: var(--color-brand-primary-10);
border: 1px solid var(--color-brand-primary);
}
[data-theme="light"] .document-name[data-v-17459df6] {
color: var(--color-text-primary);
}
[data-theme="light"] .document-meta[data-v-17459df6] {
color: var(--color-text-secondary);
}
[data-theme="light"] .check-icon[data-v-17459df6] {
color: var(--color-brand-primary);
}
/* Collaboration Indicator */
.collaboration-indicator[data-v-17459df6] {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.status-dot[data-v-17459df6] {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.status-dot.status-connected[data-v-17459df6] {
background-color: var(--color-brand-primary);
box-shadow: 0 0 0 2px var(--color-brand-primary-20);
}
.status-dot.status-connecting[data-v-17459df6] {
background-color: #f59e0b;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
animation: pulse-17459df6 2s ease-in-out infinite;
}
.status-dot.status-disconnected[data-v-17459df6] {
background-color: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
@keyframes pulse-17459df6 {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.users-avatars[data-v-17459df6] {
display: flex;
align-items: center;
margin-left: -2px;
}
.user-avatar[data-v-17459df6] {
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.5rem;
font-weight: 600;
border: 1.5px solid var(--color-bg-primary, #18181b);
flex-shrink: 0;
margin-left: -4px;
cursor: pointer;
transition: transform 0.2s;
}
.user-avatar[data-v-17459df6]:hover {
transform: translateY(-1px) scale(1.1);
z-index: 1;
}
.user-avatar[data-v-17459df6]:first-child {
margin-left: 0;
}
.users-count[data-v-17459df6] {
color: var(--color-text-secondary, #a1a1aa);
font-size: 0.7rem;
font-weight: 500;
margin-left: 2px;
}
[data-theme="light"] .collaboration-indicator[data-v-17459df6] {
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .user-avatar[data-v-17459df6] {
border-color: var(--color-bg-primary, #ffffff);
}
.workbench-overlay[data-v-ced5cea5] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
padding: 40px;
}
.workbench-container[data-v-ced5cea5] {
width: 100%;
max-width: 1200px;
max-height: 90vh;
background: #18181b;
border: 1px solid #3f3f46;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Header */
.workbench-header[data-v-ced5cea5] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 32px;
border-bottom: 1px solid #27272a;
}
.workbench-title[data-v-ced5cea5] {
font-size: 24px;
font-weight: 600;
color: #e4e4e7;
margin: 0;
}
.close-button[data-v-ced5cea5] {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
border: none;
border-radius: 8px;
color: #a1a1aa;
cursor: pointer;
transition: all 150ms ease;
}
.close-button[data-v-ced5cea5]:hover {
background: #27272a;
color: #e4e4e7;
}
.close-button .material-icons[data-v-ced5cea5] {
font-size: 24px;
}
/* Search Bar */
.search-container[data-v-ced5cea5] {
position: relative;
padding: 0 32px 24px;
}
.search-icon[data-v-ced5cea5] {
position: absolute;
left: 48px;
top: 12px;
color: #71717a;
font-size: 20px;
}
.search-input[data-v-ced5cea5] {
width: 100%;
padding: 12px 16px 12px 44px;
background: #27272a;
border: 1px solid #3f3f46;
border-radius: 8px;
color: #e4e4e7;
font-size: 15px;
outline: none;
transition: all 200ms ease;
}
.search-input[data-v-ced5cea5]:focus {
border-color: #60a5fa;
background: #1f1f23;
}
.search-input[data-v-ced5cea5]::-moz-placeholder {
color: #71717a;
}
.search-input[data-v-ced5cea5]::placeholder {
color: #71717a;
}
/* Document Grid */
.documents-grid[data-v-ced5cea5] {
flex: 1;
padding: 0 32px 32px;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.document-card[data-v-ced5cea5] {
position: relative;
padding: 24px;
background: #27272a;
border: 1px solid #3f3f46;
border-radius: 12px;
cursor: pointer;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.document-card[data-v-ced5cea5]:hover {
background: #2d2d30;
border-color: #52525b;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.document-card.current-document[data-v-ced5cea5] {
border-color: #60a5fa;
background: #1e293b;
}
.document-icon[data-v-ced5cea5] {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #3f3f46;
border-radius: 8px;
margin-bottom: 16px;
}
.document-icon .material-icons[data-v-ced5cea5] {
font-size: 24px;
color: #a1a1aa;
}
.document-card:hover .document-icon[data-v-ced5cea5] {
background: #52525b;
}
.document-card:hover .document-icon .material-icons[data-v-ced5cea5] {
color: #e4e4e7;
}
.document-name[data-v-ced5cea5] {
font-size: 16px;
font-weight: 500;
color: #e4e4e7;
margin: 0 0 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.document-meta[data-v-ced5cea5] {
font-size: 13px;
color: #71717a;
margin: 0;
}
.current-indicator[data-v-ced5cea5] {
position: absolute;
top: 16px;
right: 16px;
color: #60a5fa;
}
.current-indicator .material-icons[data-v-ced5cea5] {
font-size: 20px;
}
/* New Document Card */
.new-document-card[data-v-ced5cea5] {
border-style: dashed;
background: transparent;
}
.new-document-card[data-v-ced5cea5]:hover {
background: #27272a;
border-style: solid;
}
.new-document-card .document-icon[data-v-ced5cea5] {
background: transparent;
border: 2px dashed #3f3f46;
}
.new-document-card:hover .document-icon[data-v-ced5cea5] {
background: #3f3f46;
border-style: solid;
}
/* Scrollbar */
.documents-grid[data-v-ced5cea5]::-webkit-scrollbar {
width: 8px;
}
.documents-grid[data-v-ced5cea5]::-webkit-scrollbar-track {
background: transparent;
}
.documents-grid[data-v-ced5cea5]::-webkit-scrollbar-thumb {
background: #3f3f46;
border-radius: 4px;
}
.documents-grid[data-v-ced5cea5]::-webkit-scrollbar-thumb:hover {
background: #52525b;
}
/* Animation */
.workbench-enter-active[data-v-ced5cea5],
.workbench-leave-active[data-v-ced5cea5] {
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.workbench-enter-from[data-v-ced5cea5],
.workbench-leave-to[data-v-ced5cea5] {
opacity: 0;
}
.workbench-enter-from .workbench-container[data-v-ced5cea5],
.workbench-leave-to .workbench-container[data-v-ced5cea5] {
transform: scale(0.95) translateY(20px);
opacity: 0;
}
/* Breadcrumb Navigation */
.breadcrumb-nav[data-v-6c550ada] {
display: flex;
align-items: center;
margin-left: 12px;
}
.breadcrumb-list[data-v-6c550ada] {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 4px;
}
.breadcrumb-item[data-v-6c550ada] {
display: flex;
align-items: center;
}
.breadcrumb-separator[data-v-6c550ada] {
display: flex;
align-items: center;
color: var(--color-text-tertiary);
opacity: 0.5;
}
/* Breadcrumb Buttons */
.breadcrumb-button[data-v-6c550ada] {
display: flex;
align-items: center;
justify-content: center;
padding: 4px 6px;
border-radius: 4px;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
font-size: 13px;
line-height: 1;
white-space: nowrap;
}
/* Icon-only button (Home) */
.breadcrumb-button[data-v-6c550ada]:not(.breadcrumb-text) {
padding: 4px;
}
.breadcrumb-button[data-v-6c550ada]:hover:not(:disabled) {
background: var(--navbar-button-hover);
color: var(--color-text-primary);
}
.breadcrumb-button[data-v-6c550ada]:active:not(:disabled) {
background: var(--navbar-button-active);
}
.breadcrumb-button.active[data-v-6c550ada] {
color: var(--color-text-primary);
}
/* Current page (disabled) */
.breadcrumb-button.current[data-v-6c550ada] {
color: var(--color-text-primary);
font-weight: 500;
cursor: default;
}
.breadcrumb-button.current[data-v-6c550ada]:hover {
background: transparent;
}
/* Breadcrumb Input */
.breadcrumb-input[data-v-6c550ada] {
background: var(--color-bg-elevated);
border: 1px solid var(--color-brand-primary);
padding: 4px 6px;
border-radius: 4px;
font-size: 13px;
color: var(--color-text-primary);
outline: none;
min-width: 150px;
font-family: inherit;
}
.breadcrumb-input[data-v-6c550ada]:focus {
box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}
/* Loading skeleton */
.breadcrumb-skeleton[data-v-6c550ada] {
width: 120px;
height: 18px;
background: linear-gradient(
90deg,
var(--color-bg-tertiary) 25%,
var(--color-bg-secondary) 50%,
var(--color-bg-tertiary) 75%
);
background-size: 200% 100%;
animation: skeleton-loading-6c550ada 1.5s ease-in-out infinite;
border-radius: 4px;
}
@keyframes skeleton-loading-6c550ada {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Responsive */
@media (max-width: 640px) {
.breadcrumb-text[data-v-6c550ada] {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
.breadcrumb-input[data-v-6c550ada] {
min-width: 100px;
}
.breadcrumb-skeleton[data-v-6c550ada] {
width: 80px;
}
}
.document-title-container[data-v-861ebb4c] {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.document-title-wrapper[data-v-861ebb4c] {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
/* 标题显示按钮 */
.document-title-display[data-v-861ebb4c] {
background: transparent;
border: none;
padding: 4px 8px;
border-radius: 4px;
cursor: text;
transition: background-color 0.15s ease;
display: flex;
align-items: center;
min-width: 0;
max-width: 400px;
}
.document-title-display[data-v-861ebb4c]:hover {
background: var(--navbar-button-hover);
}
.title-text[data-v-861ebb4c] {
font-size: 14px;
font-weight: 500;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 标题输入框 */
.document-title-input[data-v-861ebb4c] {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border-primary);
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: var(--color-text-primary);
outline: none;
min-width: 200px;
max-width: 400px;
transition: border-color 0.15s ease;
}
.document-title-input[data-v-861ebb4c]:focus {
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 2px var(--color-brand-primary-10);
}
/* 状态指示器 */
.status-indicator[data-v-861ebb4c] {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.status-dot[data-v-861ebb4c] {
width: 6px;
height: 6px;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.status-text[data-v-861ebb4c] {
font-size: 12px;
color: var(--color-text-tertiary);
white-space: nowrap;
}
/* 状态样式 */
.status-saved .status-dot[data-v-861ebb4c] {
background-color: var(--color-success);
}
.status-saving .status-dot[data-v-861ebb4c] {
background-color: var(--color-warning);
animation: pulse-861ebb4c 1.5s ease-in-out infinite;
}
.status-error .status-dot[data-v-861ebb4c] {
background-color: var(--color-error);
}
@keyframes pulse-861ebb4c {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* 协作用户头像 */
.collaboration-avatars[data-v-861ebb4c] {
display: flex;
align-items: center;
margin-left: 8px;
flex-shrink: 0;
}
.avatar[data-v-861ebb4c] {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: white;
border: 2px solid var(--navbar-bg);
margin-left: -8px;
cursor: default;
transition: transform 0.15s ease;
}
.avatar[data-v-861ebb4c]:first-child {
margin-left: 0;
}
.avatar[data-v-861ebb4c]:hover {
transform: translateY(-2px);
z-index: 20 !important;
}
.avatar-overflow[data-v-861ebb4c] {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
color: var(--color-text-secondary);
background: var(--color-bg-tertiary);
border: 2px solid var(--navbar-bg);
margin-left: -8px;
}
/* Notion 风格导航栏 */
.navigation-bar[data-v-07c22824] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 45px;
z-index: 30;
background: var(--navbar-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--navbar-separator);
}
.nav-content[data-v-07c22824] {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
gap: 16px;
}
.nav-left[data-v-07c22824] {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 0;
}
.nav-center[data-v-07c22824] {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
max-width: 600px;
margin: 0 auto;
}
/* Status & Collaboration */
.status-collaboration[data-v-07c22824] {
display: flex;
align-items: center;
gap: 12px;
}
/* Status Indicator */
.status-indicator[data-v-07c22824] {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.status-dot[data-v-07c22824] {
width: 6px;
height: 6px;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.status-text[data-v-07c22824] {
font-size: 12px;
color: var(--color-text-tertiary);
white-space: nowrap;
}
.status-saved .status-dot[data-v-07c22824] {
background-color: var(--color-success);
}
.status-saving .status-dot[data-v-07c22824] {
background-color: var(--color-warning);
animation: pulse-07c22824 1.5s ease-in-out infinite;
}
.status-error .status-dot[data-v-07c22824] {
background-color: var(--color-error);
}
@keyframes pulse-07c22824 {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Collaboration Avatars */
.collaboration-avatars[data-v-07c22824] {
display: flex;
align-items: center;
flex-shrink: 0;
}
.avatar[data-v-07c22824] {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: white;
border: 2px solid var(--navbar-bg);
margin-left: -8px;
cursor: default;
transition: transform 0.15s ease;
}
.avatar[data-v-07c22824]:first-child {
margin-left: 0;
}
.avatar[data-v-07c22824]:hover {
transform: translateY(-2px);
z-index: 20 !important;
}
.avatar-overflow[data-v-07c22824] {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
color: var(--color-text-secondary);
background: var(--color-bg-tertiary);
border: 2px solid var(--navbar-bg);
margin-left: -8px;
}
.nav-right[data-v-07c22824] {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Separator between status and actions */
.nav-separator[data-v-07c22824] {
width: 1px;
height: 20px;
background: var(--navbar-separator);
margin: 0 4px;
}
/* Session Info */
.session-info[data-v-07c22824] {
text-align: center;
}
.session-name[data-v-07c22824] {
font-size: 14px;
font-weight: 500;
color: var(--color-text-secondary);
}
/* Notion 风格按钮 - 无边框 */
.nav-action-button[data-v-07c22824] {
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
flex-shrink: 0;
}
.nav-action-button[data-v-07c22824]:hover {
background: var(--navbar-button-hover);
color: var(--color-text-primary);
}
.nav-action-button[data-v-07c22824]:active {
background: var(--navbar-button-active);
}
.nav-action-button.active[data-v-07c22824] {
background: var(--navbar-button-active);
color: var(--color-text-primary);
}
/* Document Menu */
.document-menu[data-v-07c22824] {
background: var(--color-bg-elevated);
border-radius: 8px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border-subtle);
padding: 6px;
min-width: 200px;
animation: menu-appear-07c22824 0.15s ease-out;
}
@keyframes menu-appear-07c22824 {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.menu-item[data-v-07c22824] {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 7px 10px;
border-radius: 4px;
background: transparent;
border: none;
color: var(--color-text-primary);
font-size: 14px;
cursor: pointer;
transition: background-color 0.15s ease;
text-align: left;
}
.menu-item[data-v-07c22824]:hover {
background: var(--navbar-button-hover);
}
.menu-item.active[data-v-07c22824] {
background: var(--navbar-button-active);
}
.menu-item svg[data-v-07c22824] {
flex-shrink: 0;
color: var(--color-text-secondary);
}
.menu-toggle[data-v-07c22824] {
cursor: default;
}
.menu-toggle[data-v-07c22824]:hover {
background: transparent;
}
.menu-section[data-v-07c22824] {
margin: 4px 0;
}
.menu-section-title[data-v-07c22824] {
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.menu-divider[data-v-07c22824] {
height: 1px;
background: var(--navbar-separator);
margin: 6px 0;
}
/* Window Controls */
.window-controls[data-v-07c22824] {
display: flex;
align-items: center;
gap: 8px;
margin-left: 8px;
padding-left: 8px;
border-left: 1px solid var(--navbar-separator);
}
.window-control-btn[data-v-07c22824] {
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
}
.window-control-btn[data-v-07c22824]:hover {
background: var(--navbar-button-hover);
color: var(--color-text-primary);
}
.window-close[data-v-07c22824]:hover {
background: #ff453a;
color: white;
}
/* Utility */
.ml-auto[data-v-07c22824] {
margin-left: auto;
}
.dox-editor-view[data-v-d5bb5973] {
/* Smooth gradient background */
background: linear-gradient(
135deg,
var(--color-bg-primary) 0%,
var(--color-bg-secondary) 100%
);
}
/* Pulse animation for the status badge */
@keyframes pulse-ring-d5bb5973 {
0% {
transform: scale(0.8);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.3;
}
100% {
transform: scale(0.8);
opacity: 1;
}
}
/* Feature card hover effect */
.dox-editor-view .grid > div[data-v-d5bb5973] {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dox-editor-view .grid > div[data-v-d5bb5973]:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.dox-editor-view .grid[data-v-d5bb5973] {
grid-template-columns: 1fr;
}
}
/* Editor styles */
.editor-container[data-v-fa8ae52b] {
display: flex;
flex-direction: column;
height: 100%;
background: white;
}
.editor-content[data-v-fa8ae52b] {
flex: 1;
overflow-y: auto;
padding: 1rem;
}
.editor-toolbar[data-v-fa8ae52b] {
border-bottom: 1px solid #e5e7eb;
padding: 0.5rem;
background: #f9fafb;
}
/* TipTap editor styles */
.ProseMirror[data-v-fa8ae52b] {
outline: none;
padding: 1rem;
line-height: 1.6;
font-size: 16px;
color: #374151;
}
/* Light mode ProseMirror base styles */
[data-theme="light"] .ProseMirror[data-v-fa8ae52b] {
color: var(--color-text-primary);
}
.ProseMirror h1[data-v-fa8ae52b],
.ProseMirror h2[data-v-fa8ae52b],
.ProseMirror h3[data-v-fa8ae52b],
.ProseMirror h4[data-v-fa8ae52b],
.ProseMirror h5[data-v-fa8ae52b],
.ProseMirror h6[data-v-fa8ae52b] {
font-weight: 600;
margin: 1.5em 0 0.5em 0;
color: #1f2937;
}
[data-theme="light"] .ProseMirror h1[data-v-fa8ae52b],
[data-theme="light"] .ProseMirror h2[data-v-fa8ae52b],
[data-theme="light"] .ProseMirror h3[data-v-fa8ae52b],
[data-theme="light"] .ProseMirror h4[data-v-fa8ae52b],
[data-theme="light"] .ProseMirror h5[data-v-fa8ae52b],
[data-theme="light"] .ProseMirror h6[data-v-fa8ae52b] {
color: var(--color-text-primary);
}
.ProseMirror h1[data-v-fa8ae52b] {
font-size: 2em;
}
.ProseMirror h2[data-v-fa8ae52b] {
font-size: 1.5em;
}
.ProseMirror h3[data-v-fa8ae52b] {
font-size: 1.25em;
}
.ProseMirror p[data-v-fa8ae52b] {
margin: 0.5em 0;
}
.ProseMirror ul[data-v-fa8ae52b],
.ProseMirror ol[data-v-fa8ae52b] {
padding-left: 1.5em;
margin: 0.5em 0;
}
.ProseMirror li[data-v-fa8ae52b] {
margin: 0.25em 0;
}
.ProseMirror blockquote[data-v-fa8ae52b] {
border-left: 4px solid #d1d5db;
padding-left: 1em;
margin: 1em 0;
color: #6b7280;
font-style: italic;
}
[data-theme="light"] .ProseMirror blockquote[data-v-fa8ae52b] {
border-left: 4px solid var(--color-brand-primary);
color: var(--color-text-secondary);
}
.ProseMirror code[data-v-fa8ae52b] {
background: #f3f4f6;
padding: 0.25em 0.5em;
border-radius: 0.25em;
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
font-size: 0.9em;
}
[data-theme="light"] .ProseMirror code[data-v-fa8ae52b] {
background: var(--color-code-bg);
color: var(--color-text-primary);
}
.ProseMirror pre[data-v-fa8ae52b] {
background: #1f2937;
color: #f9fafb;
padding: 1em;
border-radius: 0.5em;
overflow-x: auto;
margin: 1em 0;
}
.ProseMirror pre code[data-v-fa8ae52b] {
background: transparent;
padding: 0;
color: inherit;
}
.ProseMirror table[data-v-fa8ae52b] {
border-collapse: collapse;
width: 100%;
margin: 1em 0;
}
.ProseMirror table th[data-v-fa8ae52b],
.ProseMirror table td[data-v-fa8ae52b] {
border: 1px solid var(--color-brand-secondary-40) !important;
padding: 0.5em;
text-align: left;
}
[data-theme="light"] .ProseMirror table th[data-v-fa8ae52b],
[data-theme="light"] .ProseMirror table td[data-v-fa8ae52b] {
border: 1px solid var(--color-brand-primary-50) !important;
color: var(--color-text-primary);
}
.ProseMirror table th[data-v-fa8ae52b] {
background: #f9fafb;
font-weight: 600;
}
[data-theme="light"] .ProseMirror table th[data-v-fa8ae52b] {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.ProseMirror .highlight[data-v-fa8ae52b] {
background: #fef3c7;
padding: 0.1em 0.2em;
border-radius: 0.25em;
}
/* Bubble menu styles */
.bubble-menu[data-v-fa8ae52b] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
padding: 0.5rem;
display: flex;
gap: 0.25rem;
}
.bubble-menu button[data-v-fa8ae52b] {
background: transparent;
border: none;
padding: 0.5rem;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.2s;
}
.bubble-menu button[data-v-fa8ae52b]:hover {
background: #f3f4f6;
}
.bubble-menu button.is-active[data-v-fa8ae52b] {
background: #3b82f6;
color: white;
}
/* Floating menu styles */
.floating-menu[data-v-fa8ae52b] {
background: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
padding: 0.5rem;
display: flex;
gap: 0.25rem;
}
.floating-menu button[data-v-fa8ae52b] {
background: transparent;
border: none;
padding: 0.5rem;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.2s;
}
.floating-menu button[data-v-fa8ae52b]:hover {
background: #f3f4f6;
}
/* Image styles */
.ProseMirror img[data-v-fa8ae52b] {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin: 1em 0;
}
.image-gallery[data-v-fa8ae52b] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1em 0;
}
.image-gallery img[data-v-fa8ae52b] {
width: 100%;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 0.5rem;
cursor: pointer;
transition: transform 0.2s;
}
.image-gallery img[data-v-fa8ae52b]:hover {
transform: scale(1.05);
}
/* Heading collapse styles */
.ProseMirror .heading-collapsed[data-v-fa8ae52b] {
position: relative;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.ProseMirror .heading-collapsed[data-v-fa8ae52b]::after {
content: '...';
color: #6b7280;
font-size: 0.9em;
margin-left: 8px;
font-weight: normal;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.ProseMirror .heading-collapsed[data-v-fa8ae52b]:hover::after {
opacity: 1;
}
/* Collapsed content - ensure it's properly hidden */
.ProseMirror .content-collapsed[data-v-fa8ae52b] {
display: none !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
visibility: hidden !important;
}
/* Ensure proper spacing and positioning for headings */
.ProseMirror h1[data-collapsed="true"][data-v-fa8ae52b],
.ProseMirror h2[data-collapsed="true"][data-v-fa8ae52b],
.ProseMirror h3[data-collapsed="true"][data-v-fa8ae52b],
.ProseMirror h4[data-collapsed="true"][data-v-fa8ae52b],
.ProseMirror h5[data-collapsed="true"][data-v-fa8ae52b],
.ProseMirror h6[data-collapsed="true"][data-v-fa8ae52b] {
margin-bottom: 1em;
cursor: pointer;
position: relative;
border-radius: 4px;
padding: 0.25em 0.5em;
margin-left: -0.5em;
margin-right: -0.5em;
transition: background-color 0.2s ease;
}
.ProseMirror h1[data-collapsed="true"][data-v-fa8ae52b]:hover,
.ProseMirror h2[data-collapsed="true"][data-v-fa8ae52b]:hover,
.ProseMirror h3[data-collapsed="true"][data-v-fa8ae52b]:hover,
.ProseMirror h4[data-collapsed="true"][data-v-fa8ae52b]:hover,
.ProseMirror h5[data-collapsed="true"][data-v-fa8ae52b]:hover,
.ProseMirror h6[data-collapsed="true"][data-v-fa8ae52b]:hover {
background-color: var(--color-brand-primary-05);
}
/* Smooth transitions for showing/hiding content */
.ProseMirror[data-v-fa8ae52b] * {
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Ensure collapsed content remains hidden during transitions */
.ProseMirror .content-collapsed[data-v-fa8ae52b] * {
display: none !important;
visibility: hidden !important;
}
/* Image styles in editor */
.ProseMirror img[data-v-fa8ae52b],
.ProseMirror .editor-image[data-v-fa8ae52b] {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 1.5em 0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
cursor: pointer;
display: block;
}
.ProseMirror img[data-v-fa8ae52b]:hover,
.ProseMirror .editor-image[data-v-fa8ae52b]:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transform: scale(1.02);
}
/* 普通img的选中样式（不在image-container内的） */
.ProseMirror img.ProseMirror-selectednode[data-v-fa8ae52b]:not(.image-container *),
.ProseMirror .editor-image.ProseMirror-selectednode[data-v-fa8ae52b]:not(.image-container *) {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
}
/* Center align images by default */
.ProseMirror p > img[data-v-fa8ae52b],
.ProseMirror p > .editor-image[data-v-fa8ae52b] {
margin-left: auto;
margin-right: auto;
}
/* Image caption support */
.ProseMirror figure[data-v-fa8ae52b] {
margin: 1.5em 0;
text-align: center;
}
.ProseMirror figure img[data-v-fa8ae52b] {
margin: 0 auto 0.5em;
}
.ProseMirror figcaption[data-v-fa8ae52b] {
font-size: 0.875em;
color: var(--color-text-secondary);
font-style: italic;
margin-top: 0.5em;
}
/* ============================================
FIX: Empty paragraphs after charts, tables, and mermaid blocks
============================================ */
/* CRITICAL FIX: Ensure all empty paragraphs are visible and clickable
Note: Empty paragraphs in ProseMirror contain
,
so we need to match p:empty OR p with only a br child */
.ProseMirror p[data-v-fa8ae52b]:empty,
.ProseMirror p[data-v-fa8ae52b]:has(> br.ProseMirror-trailingBreak:only-child),
.tiptap-editor .ProseMirror p[data-v-fa8ae52b]:empty,
.tiptap-editor .ProseMirror p[data-v-fa8ae52b]:has(> br.ProseMirror-trailingBreak:only-child) {
min-height: 1.5em;
line-height: 1.5em;
}
/* Paragraphs adjacent to tables, charts, and mermaid blocks have no margin (except empty ones) */
.ProseMirror table + p[data-v-fa8ae52b]:not(:empty):not(:has(> br.ProseMirror-trailingBreak:only-child)),
.ProseMirror p + table[data-v-fa8ae52b],
.ProseMirror .echarts-block + p[data-v-fa8ae52b]:not(:empty):not(:has(> br.ProseMirror-trailingBreak:only-child)),
.ProseMirror p + .echarts-block[data-v-fa8ae52b],
.ProseMirror .mermaid-block + p[data-v-fa8ae52b]:not(:empty):not(:has(> br.ProseMirror-trailingBreak:only-child)),
.ProseMirror p + .mermaid-block[data-v-fa8ae52b],
.tiptap-editor table + p[data-v-fa8ae52b]:not(:empty):not(:has(> br.ProseMirror-trailingBreak:only-child)),
.tiptap-editor p + table[data-v-fa8ae52b],
.tiptap-editor .echarts-block + p[data-v-fa8ae52b]:not(:empty):not(:has(> br.ProseMirror-trailingBreak:only-child)),
.tiptap-editor p + .echarts-block[data-v-fa8ae52b],
.tiptap-editor .mermaid-block + p[data-v-fa8ae52b]:not(:empty):not(:has(> br.ProseMirror-trailingBreak:only-child)),
.tiptap-editor p + .mermaid-block[data-v-fa8ae52b] {
margin: 0 !important;
}
/* Ensure empty paragraphs after tables, charts, and mermaid blocks are visible */
.ProseMirror table + p[data-v-fa8ae52b]:empty,
.ProseMirror table + p[data-v-fa8ae52b]:has(> br.ProseMirror-trailingBreak:only-child),
.ProseMirror .echarts-block + p[data-v-fa8ae52b]:empty,
.ProseMirror .echarts-block + p[data-v-fa8ae52b]:has(> br.ProseMirror-trailingBreak:only-child),
.ProseMirror .mermaid-block + p[data-v-fa8ae52b]:empty,
.ProseMirror .mermaid-block + p[data-v-fa8ae52b]:has(> br.ProseMirror-trailingBreak:only-child),
.tiptap-editor table + p[data-v-fa8ae52b]:empty,
.tiptap-editor table + p[data-v-fa8ae52b]:has(> br.ProseMirror-trailingBreak:only-child),
.tiptap-editor .echarts-block + p[data-v-fa8ae52b]:empty,
.tiptap-editor .echarts-block + p[data-v-fa8ae52b]:has(> br.ProseMirror-trailingBreak:only-child),
.tiptap-editor .mermaid-block + p[data-v-fa8ae52b]:empty,
.tiptap-editor .mermaid-block + p[data-v-fa8ae52b]:has(> br.ProseMirror-trailingBreak:only-child) {
min-height: 1.5em;
line-height: 1.5em;
margin-top: 0.1rem !important;
}
[data-v-fa8ae52b] .document-editor {
padding: 1rem;
height: 100%;
max-height: 100%;
}
/* Data File Editor - independent styling for CSV/XLSX editors */
[data-v-fa8ae52b] .data-file-editor {
height: 100%;
max-height: 100%;
/* No padding - let DataEditor component control its own spacing */
}
[data-v-fa8ae52b] .document-editor .ProseMirror {
outline: none;
min-height: 100%;
overflow-y: auto;
padding-bottom: 120px;
}
[data-v-fa8ae52b] .document-editor > div {
height: 100%;
}
[data-v-fa8ae52b] .original-content {
color: var(--text-secondary);
text-decoration-line: line-through;
}
[data-v-fa8ae52b] .new-content {
color: var(--color-brand-secondary);
}
[data-v-fa8ae52b] .content-separator {
margin-left: 0.5rem;
margin-right: 0.5rem;
color: var(--text-secondary);
}
[data-v-fa8ae52b] .document-editor h1 {
margin-bottom: 1rem;
margin-top: 1.5rem;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
padding-bottom: 0.5rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
/* Light mode editor text styles */
[data-theme="light"][data-v-fa8ae52b] .document-editor h1 {
--tw-border-opacity: 1;
border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
color: var(--color-text-primary);
border-color: var(--color-brand-primary);
}
[data-v-fa8ae52b] .document-editor h2 {
margin-bottom: 0.75rem;
margin-top: 1.25rem;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
padding-bottom: 0.25rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
color: var(--text-primary);
}
[data-theme="light"][data-v-fa8ae52b] .document-editor h2 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
color: var(--color-text-primary);
border-color: var(--color-border-primary);
}
[data-v-fa8ae52b] .document-editor h3 {
margin-top: 1rem;
margin-bottom: 0.5rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(221 214 254 / var(--tw-text-opacity, 1));
border-bottom: 1px solid rgba(139, 92, 246, 0.3);
padding-bottom: 0.25rem;
}
[data-theme="light"][data-v-fa8ae52b] .document-editor h3 {
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
[data-v-fa8ae52b] .document-editor p {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
color: var(--text-primary);
}
[data-theme="light"][data-v-fa8ae52b] .document-editor p {
color: var(--color-text-primary);
}
[data-v-fa8ae52b] .document-editor ul,[data-v-fa8ae52b] .document-editor ol {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
padding-left: 1.25rem;
color: var(--text-primary);
}
[data-theme="light"][data-v-fa8ae52b] .document-editor ul,
[data-theme="light"][data-v-fa8ae52b] .document-editor ol {
color: var(--color-text-primary);
}
/* Forcefully remove the editor's automatic list numbering to prevent duplication. */
[data-v-fa8ae52b] .document-editor ol {
list-style: none !important;
counter-reset: none !important;
}
/* Keep bullet points for unordered lists */
[data-v-fa8ae52b] .document-editor ul {
list-style-type: disc !important;
}
[data-v-fa8ae52b] .document-editor li {
margin-bottom: 0.25rem;
}
[data-v-fa8ae52b] .document-editor table {
margin-top: 1rem;
margin-bottom: 1rem;
width: 100%;
border-collapse: collapse;
}
[data-v-fa8ae52b] .document-editor th,[data-v-fa8ae52b] .document-editor td {
padding: 0.5rem;
text-align: left;
color: var(--text-primary);
border: 1px solid rgba(168, 85, 247, 0.6) !important;
}
[data-theme="light"][data-v-fa8ae52b] .document-editor th,
[data-theme="light"][data-v-fa8ae52b] .document-editor td {
color: var(--color-text-primary);
border: 1px solid rgba(168, 85, 247, 0.7) !important;
}
[data-v-fa8ae52b] .document-editor th {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
font-weight: 500;
color: var(--text-primary);
}
[data-theme="light"][data-v-fa8ae52b] .document-editor th {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
}
[data-v-fa8ae52b] .document-editor tr:nth-child(even) {
background-color: rgb(31 41 55 / 0.3);
}
[data-theme="light"][data-v-fa8ae52b] .document-editor tr:nth-child(even) {
background-color: var(--color-bg-hover);
}
[data-v-fa8ae52b] .document-editor blockquote {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
border-left-width: 4px;
border-color: var(--color-brand-primary);
padding-left: 1rem;
font-style: italic;
color: var(--color-text-tertiary);
}
[data-theme="light"][data-v-fa8ae52b] .document-editor blockquote {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
border-left-width: 4px;
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
padding-left: 1rem;
font-style: italic;
color: var(--color-text-secondary);
border-color: var(--color-brand-primary);
}
[data-v-fa8ae52b] .document-editor strong {
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(153 246 228 / var(--tw-text-opacity, 1));
}
[data-theme="light"][data-v-fa8ae52b] .document-editor strong {
color: var(--color-text-primary);
font-weight: 600;
}
[data-v-fa8ae52b] .document-editor em {
--tw-text-opacity: 1;
color: rgb(186 230 253 / var(--tw-text-opacity, 1));
}
[data-theme="light"][data-v-fa8ae52b] .document-editor em {
color: var(--color-text-secondary);
font-style: italic;
}
[data-v-fa8ae52b] .document-editor a {
color: var(--color-brand-secondary);
text-decoration-line: underline;
}
[data-v-fa8ae52b] .document-editor a:hover {
color: var(--color-brand-secondary);
}
[data-theme="light"][data-v-fa8ae52b] .document-editor a {
color: var(--color-brand-primary);
text-decoration: underline;
}
[data-theme="light"][data-v-fa8ae52b] .document-editor a:hover {
color: var(--color-brand-secondary);
}
[data-v-fa8ae52b] .document-editor code {
border-radius: 0.25rem;
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
[data-theme="light"][data-v-fa8ae52b] .document-editor code {
border-radius: 0.25rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.875rem;
line-height: 1.25rem;
background-color: var(--color-code-bg);
color: var(--color-text-primary);
}
/* Remove ::before pseudo-elements for headings inside list items */
[data-v-fa8ae52b] .document-editor li h1::before,[data-v-fa8ae52b] .document-editor li h2::before,[data-v-fa8ae52b] .document-editor li h3::before,[data-v-fa8ae52b] .document-editor li h4::before,[data-v-fa8ae52b] .document-editor li h5::before,[data-v-fa8ae52b] .document-editor li h6::before {
display: none !important;
content: none !important;
}
/* Ensure proper styling for headings within lists */
[data-v-fa8ae52b] .document-editor li h1,[data-v-fa8ae52b] .document-editor li h2,[data-v-fa8ae52b] .document-editor li h3,[data-v-fa8ae52b] .document-editor li h4,[data-v-fa8ae52b] .document-editor li h5,[data-v-fa8ae52b] .document-editor li h6 {
margin: 0.5rem 0;
padding: 0;
border: none;
}
/* Style nested lists properly */
[data-v-fa8ae52b] .document-editor li ul,[data-v-fa8ae52b] .document-editor li ol {
margin: 0.5rem 0;
padding-left: 1rem;
}
/* Fix excessive spacing issues between nested elements and following headings */
[data-v-fa8ae52b] .document-editor table + h1,[data-v-fa8ae52b] .document-editor table + h2,[data-v-fa8ae52b] .document-editor table + h3,[data-v-fa8ae52b] .document-editor table + h4,[data-v-fa8ae52b] .document-editor table + h5,[data-v-fa8ae52b] .document-editor table + h6 {
margin-top: 1.5rem !important;
}
/* Normalize spacing for nested list content */
[data-v-fa8ae52b] .document-editor li p:last-child {
margin-bottom: 0;
}
/* Fix spacing for tables inside list items */
[data-v-fa8ae52b] .document-editor li table {
margin: 1rem 0;
}
/* Ensure headings after complex nested structures have proper spacing */
[data-v-fa8ae52b] .document-editor ul + h1,[data-v-fa8ae52b] .document-editor ul + h2,[data-v-fa8ae52b] .document-editor ul + h3,[data-v-fa8ae52b] .document-editor ul + h4,[data-v-fa8ae52b] .document-editor ul + h5,[data-v-fa8ae52b] .document-editor ul + h6,[data-v-fa8ae52b] .document-editor ol + h1,[data-v-fa8ae52b] .document-editor ol + h2,[data-v-fa8ae52b] .document-editor ol + h3,[data-v-fa8ae52b] .document-editor ol + h4,[data-v-fa8ae52b] .document-editor ol + h5,[data-v-fa8ae52b] .document-editor ol + h6 {
margin-top: 1.5rem !important;
}
[data-v-fa8ae52b] .document-editor li h6 {
margin: 0.5rem 0;
padding: 0;
border: none;
}
/* Remove ALL ::before elements from ordered lists with maximum specificity */
[data-v-fa8ae52b] .document-editor ol li::before,[data-v-fa8ae52b] .document-editor ol > li::before,[data-v-fa8ae52b] .document-editor div ol li::before,[data-v-fa8ae52b] body .document-editor ol li::before,[data-v-fa8ae52b] .tiptap ol li::before,[data-v-fa8ae52b] .ProseMirror ol li::before {
display: none !important;
content: none !important;
visibility: hidden !important;
}
/* Also target nested ordered lists */
[data-v-fa8ae52b] .document-editor ol ol li::before,[data-v-fa8ae52b] .document-editor ol li ol li::before {
display: none !important;
content: none !important;
visibility: hidden !important;
}
/* Style nested lists properly */
[data-v-fa8ae52b] .document-editor li ul,[data-v-fa8ae52b] .document-editor li ol {
margin: 0.5rem 0;
padding-left: 1rem;
}
/* Elite Content Refresh Animations */
.content-animating[data-v-fa8ae52b] {
position: relative;
overflow: hidden;
}
.content-refresh-fade-out[data-v-fa8ae52b] {
opacity: 0;
transform: translateY(12px) scale(0.98);
filter: blur(2px) brightness(1.1);
transition: all 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.content-refresh-fade-in[data-v-fa8ae52b] {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0) brightness(1);
transition: all 0.5s cubic-bezier(0.05, 0.7, 0.1, 1);
}
/* Advanced content transitions with backdrop effect */
[data-v-fa8ae52b] .document-editor .ProseMirror {
transition: all 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
position: relative;
}
.content-animating[data-v-fa8ae52b] .document-editor .ProseMirror {
will-change: opacity, transform, filter;
}
/* Sophisticated loading overlay during content refresh */
.content-refresh-fade-out[data-v-fa8ae52b]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.05) 0%,
rgba(139, 92, 246, 0.05) 25%,
rgba(59, 130, 246, 0.05) 50%,
rgba(139, 92, 246, 0.05) 75%,
rgba(99, 102, 241, 0.05) 100%
);
background-size: 400% 400%;
animation: gradient-flow-fa8ae52b 2s ease-in-out infinite;
border-radius: 8px;
pointer-events: none;
z-index: 1;
}
/* Elegant gradient flow animation */
@keyframes gradient-flow-fa8ae52b {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Refined content appearance with glow effect */
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor .ProseMirror {
box-shadow:
0 0 0 1px rgba(139, 92, 246, 0.1),
0 4px 12px rgba(139, 92, 246, 0.05),
0 0 20px rgba(99, 102, 241, 0.03);
border-radius: 6px;
animation: content-glow-fa8ae52b 0.8s ease-out;
}
@keyframes content-glow-fa8ae52b {
0% {
box-shadow:
0 0 0 1px rgba(139, 92, 246, 0.2),
0 8px 24px rgba(139, 92, 246, 0.15),
0 0 40px rgba(99, 102, 241, 0.1);
}
100% {
box-shadow:
0 0 0 1px rgba(139, 92, 246, 0.1),
0 4px 12px rgba(139, 92, 246, 0.05),
0 0 20px rgba(99, 102, 241, 0.03);
}
}
/* Smooth micro-interactions for individual elements */
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor h1,
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor h2,
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor h3 {
animation: element-slide-in-fa8ae52b 0.6s cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
animation-delay: var(--delay, 0ms);
}
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor p,
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor li {
animation: element-fade-in-fa8ae52b 0.5s cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
animation-delay: var(--delay, 0ms);
}
@keyframes element-slide-in-fa8ae52b {
0% {
opacity: 0;
transform: translateX(-8px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes element-fade-in-fa8ae52b {
0% {
opacity: 0;
transform: translateY(4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Enhanced loading state with modern progress indicator */
.content-refresh-fade-out[data-v-fa8ae52b] .document-editor .ProseMirror {
position: relative;
}
.content-refresh-fade-out[data-v-fa8ae52b] .document-editor .ProseMirror::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 2px;
margin: -1px 0 0 -60px;
background: rgba(139, 92, 246, 0.15);
border-radius: 1px;
overflow: hidden;
z-index: 2;
}
.content-refresh-fade-out[data-v-fa8ae52b] .document-editor .ProseMirror::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 2px;
margin: -1px 0 0 -60px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(139, 92, 246, 0.8) 50%,
transparent 100%
);
border-radius: 1px;
animation: loading-progress-fa8ae52b 1.5s ease-in-out infinite;
z-index: 3;
}
@keyframes loading-progress-fa8ae52b {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Refined visual feedback during loading */
.content-refresh-fade-out[data-v-fa8ae52b] {
position: relative;
}
.content-refresh-fade-out[data-v-fa8ae52b]::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -24px 0 0 -12px;
border: 1.5px solid rgba(139, 92, 246, 0.2);
border-radius: 50%;
animation: pulse-ring-fa8ae52b 2s ease-in-out infinite;
z-index: 4;
}
@keyframes pulse-ring-fa8ae52b {
0% {
transform: scale(0.8);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.3;
}
100% {
transform: scale(0.8);
opacity: 1;
}
}
/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.content-animating[data-v-fa8ae52b],
.content-refresh-fade-out[data-v-fa8ae52b],
.content-refresh-fade-in[data-v-fa8ae52b],[data-v-fa8ae52b] .document-editor .ProseMirror,
.content-refresh-fade-out[data-v-fa8ae52b]::before,
.content-refresh-fade-out[data-v-fa8ae52b]::after,
.content-refresh-fade-out[data-v-fa8ae52b] .document-editor .ProseMirror::before,
.content-refresh-fade-out[data-v-fa8ae52b] .document-editor .ProseMirror::after,
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor h1,
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor h2,
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor h3,
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor p,
.content-refresh-fade-in[data-v-fa8ae52b] .document-editor li {
animation: none !important;
transition: opacity 0.15s ease !important;
}
.content-refresh-fade-out[data-v-fa8ae52b] {
opacity: 0.8 !important;
transform: none !important;
filter: none !important;
}
.content-refresh-fade-in[data-v-fa8ae52b] {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* Navigation bar styles */
.navigation-bar[data-v-fa8ae52b] {
animation: slideDown-fa8ae52b 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideDown-fa8ae52b {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Document content slide animation */
.document-slide-enter-active[data-v-fa8ae52b],
.document-slide-leave-active[data-v-fa8ae52b] {
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.document-slide-enter-from[data-v-fa8ae52b] {
opacity: 0;
transform: translateX(20px);
}
.document-slide-leave-to[data-v-fa8ae52b] {
opacity: 0;
transform: translateX(-20px);
}
/* Navigation backward animation */
.document-slide-back-enter-from[data-v-fa8ae52b] {
opacity: 0;
transform: translateX(-20px);
}
.document-slide-back-leave-to[data-v-fa8ae52b] {
opacity: 0;
transform: translateX(20px);
}
/* Auto-save status styles */
.autosave-saving[data-v-fa8ae52b] {
border-width: 1px;
border-color: rgb(29 78 216 / 0.3);
background-color: rgb(30 58 138 / 0.2);
color: #60a5fa; /* text-blue-400 */
}
.autosave-saved[data-v-fa8ae52b] {
border-width: 1px;
border-color: rgb(21 128 61 / 0.3);
background-color: rgb(20 83 45 / 0.2);
color: #4ade80; /* text-green-400 */
}
.autosave-error[data-v-fa8ae52b] {
border-width: 1px;
border-color: rgb(185 28 28 / 0.3);
background-color: rgb(127 29 29 / 0.2);
color: #f87171; /* text-red-400 */
}
.autosave-idle[data-v-fa8ae52b] {
border-width: 1px;
border-color: rgb(55 65 81 / 0.3);
background-color: rgb(17 24 39 / 0.2);
color: var(--text-secondary); /* Use CSS variable for semantic color */
}
/* Enhanced content refresh animations */
.content-refresh-enter-active[data-v-fa8ae52b],
.content-refresh-leave-active[data-v-fa8ae52b] {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.content-refresh-enter-from[data-v-fa8ae52b] {
opacity: 0;
transform: translateY(20px) scale(0.95);
filter: blur(4px);
}
.content-refresh-leave-to[data-v-fa8ae52b] {
opacity: 0;
transform: translateY(-10px) scale(0.98);
filter: blur(2px);
}
/* Staggered animation for content elements */
.stagger-item[data-v-fa8ae52b] {
animation: fadeInUp-fa8ae52b 0.5s ease forwards;
opacity: 0;
transform: translateY(20px);
}
.stagger-item[data-v-fa8ae52b]:nth-child(1) { animation-delay: 0.05s;
}
.stagger-item[data-v-fa8ae52b]:nth-child(2) { animation-delay: 0.1s;
}
.stagger-item[data-v-fa8ae52b]:nth-child(3) { animation-delay: 0.15s;
}
.stagger-item[data-v-fa8ae52b]:nth-child(4) { animation-delay: 0.2s;
}
.stagger-item[data-v-fa8ae52b]:nth-child(5) { animation-delay: 0.25s;
}
.stagger-item[data-v-fa8ae52b]:nth-child(6) { animation-delay: 0.3s;
}
.stagger-item[data-v-fa8ae52b]:nth-child(7) { animation-delay: 0.35s;
}
.stagger-item[data-v-fa8ae52b]:nth-child(8) { animation-delay: 0.4s;
}
@keyframes fadeInUp-fa8ae52b {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Smooth scroll animation */
.smooth-scroll[data-v-fa8ae52b] {
scroll-behavior: smooth;
}
/* Enhanced hover effects for interactive elements */
.hover-lift[data-v-fa8ae52b] {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift[data-v-fa8ae52b]:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Chat panel slide-in/out */
.chat-slide-enter-active[data-v-fa8ae52b],
.chat-slide-leave-active[data-v-fa8ae52b] {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-slide-enter-from[data-v-fa8ae52b],
.chat-slide-leave-to[data-v-fa8ae52b] {
transform: translateX(100%);
opacity: 0;
}
/* Anonymous User Banner */
.anonymous-banner[data-v-fa8ae52b] {
background: rgba(var(--color-bg-secondary-rgb, 248, 249, 250), 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--color-text-primary);
padding: 0.75rem 1.5rem;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid var(--color-border-primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.banner-content[data-v-fa8ae52b] {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
}
.banner-content .material-icons[data-v-fa8ae52b] {
font-size: 1.25rem;
color: var(--color-brand-primary);
opacity: 0.8;
}
.banner-text[data-v-fa8ae52b] {
margin-right: 0.5rem;
color: var(--color-text-secondary);
}
.sign-in-btn[data-v-fa8ae52b] {
background: var(--color-brand-primary);
color: white;
border: 1px solid var(--color-brand-primary);
padding: 0.375rem 0.875rem;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.sign-in-btn[data-v-fa8ae52b]:hover {
background: var(--color-brand-secondary);
border-color: var(--color-brand-secondary);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
.sign-in-btn[data-v-fa8ae52b]:active {
transform: translateY(0);
}
/* Note: Color variables are now defined in colors.css */
body {
background-color: var(--color-bg-primary);
color: var(--text-primary);
}
/* Vertical text styles */
.writing-vertical {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
}
/* Edge hover animation */
@keyframes pulseEdge {
0% {
box-shadow: 0 0 0 0 var(--color-brand-primary);
opacity: 0.2;
}
70% {
box-shadow: 0 0 0 10px var(--color-brand-primary);
opacity: 0;
}
100% {
box-shadow: 0 0 0 0 var(--color-brand-primary);
opacity: 0;
}
}
.edge-pulse {
animation: pulseEdge 2s infinite;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background-color: var(--color-bg-tertiary);
}
::-webkit-scrollbar-thumb {
border-radius: 9999px;
background-color: var(--color-border-primary);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-border-strong);
}
/* Action button styles */
/* Notion Style Header */
.workspace-header[data-v-31061394] {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 45px;
background: var(--navbar-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--navbar-separator);
z-index: 1000;
}
.nav-content[data-v-31061394] {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
gap: 16px;
}
.nav-left[data-v-31061394] {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 0;
}
.nav-center[data-v-31061394] {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
max-width: 600px;
margin: 0 auto;
}
.nav-right[data-v-31061394] {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Separator between actions */
.nav-separator[data-v-31061394] {
width: 1px;
height: 20px;
background: var(--navbar-separator);
margin: 0 4px;
}
/* Notion Style Action Button */
.nav-action-button[data-v-31061394] {
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
flex-shrink: 0;
}
.nav-action-button[data-v-31061394]:hover {
background: var(--navbar-button-hover);
color: var(--color-text-primary);
}
.nav-action-button[data-v-31061394]:active {
background: var(--navbar-button-active);
}
/* Hide scrollbar for template gallery */
.no-scrollbar[data-v-31061394]::-webkit-scrollbar {
display: none;
}
.no-scrollbar[data-v-31061394] {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Line clamp utilities */
.line-clamp-6[data-v-31061394] {
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-\[12\][data-v-31061394] {
display: -webkit-box;
-webkit-line-clamp: 12;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2[data-v-31061394] {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Markdown preview styles */
.markdown-preview[data-v-31061394] {
word-wrap: break-word;
overflow-wrap: break-word;
}
.markdown-preview[data-v-31061394] * {
color: inherit !important;
}
.markdown-preview h1[data-v-31061394],
.markdown-preview h2[data-v-31061394],
.markdown-preview h3[data-v-31061394],
.markdown-preview h4[data-v-31061394],
.markdown-preview h5[data-v-31061394],
.markdown-preview h6[data-v-31061394] {
margin-top: 0;
margin-bottom: 0.35em;
font-weight: 700;
line-height: 1.3;
}
.dark .markdown-preview h1[data-v-31061394],
.dark .markdown-preview h2[data-v-31061394],
.dark .markdown-preview h3[data-v-31061394],
.dark .markdown-preview h4[data-v-31061394],
.dark .markdown-preview h5[data-v-31061394],
.dark .markdown-preview h6[data-v-31061394] {
font-weight: 700;
}
.markdown-preview h1[data-v-31061394] {
font-size: 1.5em;
}
.markdown-preview h2[data-v-31061394] {
font-size: 1.35em;
}
.markdown-preview h3[data-v-31061394] {
font-size: 1.2em;
}
.markdown-preview h4[data-v-31061394] {
font-size: 1.1em;
}
.markdown-preview h5[data-v-31061394],
.markdown-preview h6[data-v-31061394] {
font-size: 1em;
font-weight: 600;
}
.markdown-preview p[data-v-31061394] {
margin: 0.5em 0;
}
.markdown-preview p[data-v-31061394]:first-child {
margin-top: 0;
}
.markdown-preview p[data-v-31061394]:last-child {
margin-bottom: 0;
}
.markdown-preview ul[data-v-31061394],
.markdown-preview ol[data-v-31061394] {
margin: 0.5em 0;
padding-left: 1.5em;
}
.markdown-preview li[data-v-31061394] {
margin: 0.25em 0;
}
.markdown-preview code[data-v-31061394] {
background-color: rgba(0, 0, 0, 0.05);
padding: 0.125em 0.25em;
border-radius: 3px;
font-size: 0.9em;
font-family: monospace;
}
.dark .markdown-preview code[data-v-31061394] {
background-color: rgba(255, 255, 255, 0.1);
}
.markdown-preview pre[data-v-31061394] {
background-color: rgba(0, 0, 0, 0.05);
padding: 0.5em;
border-radius: 4px;
overflow-x: auto;
margin: 0.5em 0;
}
.dark .markdown-preview pre[data-v-31061394] {
background-color: rgba(255, 255, 255, 0.05);
}
.markdown-preview pre code[data-v-31061394] {
background-color: transparent;
padding: 0;
}
.markdown-preview blockquote[data-v-31061394] {
border-left: 3px solid #d1d5db;
padding-left: 1em;
margin: 0.5em 0;
color: #6b7280;
}
.dark .markdown-preview blockquote[data-v-31061394] {
border-left-color: #4b5563;
color: #9ca3af;
}
.markdown-preview strong[data-v-31061394] {
font-weight: 600;
}
.markdown-preview em[data-v-31061394] {
font-style: italic;
}
.markdown-preview a[data-v-31061394] {
color: var(--color-brand-primary);
text-decoration: none;
}
.dark .markdown-preview a[data-v-31061394] {
color: #818cf8;
}
.markdown-preview a[data-v-31061394]:hover {
text-decoration: underline;
}
.markdown-preview img[data-v-31061394] {
max-width: 100%;
height: auto;
}
.markdown-preview table[data-v-31061394] {
border-collapse: collapse;
width: 100%;
margin: 0.5em 0;
font-size: 0.9em;
}
.markdown-preview th[data-v-31061394],
.markdown-preview td[data-v-31061394] {
border: 1px solid #d1d5db;
padding: 0.25em 0.5em;
text-align: left;
}
.dark .markdown-preview th[data-v-31061394],
.dark .markdown-preview td[data-v-31061394] {
border-color: #4b5563;
}
.markdown-preview th[data-v-31061394] {
background-color: rgba(0, 0, 0, 0.05);
font-weight: 600;
}
.dark .markdown-preview th[data-v-31061394] {
background-color: rgba(255, 255, 255, 0.05);
}
.markdown-preview hr[data-v-31061394] {
border: none;
border-top: 1px solid #d1d5db;
margin: 0.75em 0;
}
.dark .markdown-preview hr[data-v-31061394] {
border-top-color: #4b5563;
}
/* Spin animation for loading states */
@keyframes spin-31061394 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin[data-v-31061394] {
animation: spin-31061394 1s linear infinite;
}
/* Workspace Name Editor Styles */
.workspace-title-area[data-v-31061394] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 600px;
margin: 0 auto;
}
.workspace-title-display[data-v-31061394] {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 8px 16px;
border-radius: 8px;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
cursor: default;
min-width: 200px;
}
.workspace-name[data-v-31061394] {
font-size: 15px;
font-weight: 500;
color: var(--color-text-primary);
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dark .workspace-name[data-v-31061394] {
color: #e4e4e7;
}
/* Edit Icon Container */
.edit-icon-container[data-v-31061394] {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
position: relative;
}
.edit-icon[data-v-31061394] {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #e5e7eb;
border: none;
border-radius: 4px;
color: #4b5563;
cursor: pointer;
transition: all 150ms ease;
}
.dark .edit-icon[data-v-31061394] {
background: #3f3f46;
color: #e4e4e7;
}
.edit-icon[data-v-31061394]:hover {
background: #d1d5db;
transform: scale(1.05);
}
.dark .edit-icon[data-v-31061394]:hover {
background: #52525b;
}
.edit-icon .material-icons[data-v-31061394] {
font-size: 16px;
}
/* Underline Indicator */
.underline-indicator[data-v-31061394] {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
width: 80%;
height: 2px;
background: var(--color-brand-primary);
border-radius: 1px;
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
pointer-events: none;
}
.workspace-title-display:hover .underline-indicator[data-v-31061394] {
transform: translateX(-50%) scaleX(1);
}
/* Workspace Title Editor */
.workspace-title-editor[data-v-31061394] {
flex: 1;
display: flex;
justify-content: center;
}
.workspace-name-input[data-v-31061394] {
width: 100%;
max-width: 400px;
padding: 8px 16px;
background: #f3f4f6;
border: 2px solid var(--color-brand-primary);
border-radius: 8px;
color: #1f2937;
font-size: 15px;
font-weight: 500;
outline: none;
transition: all 200ms ease;
}
.dark .workspace-name-input[data-v-31061394] {
background: #18181b;
color: #e4e4e7;
border-color: #60a5fa;
}
.workspace-name-input[data-v-31061394]:focus {
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.dark .workspace-name-input[data-v-31061394]:focus {
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}
/* Edit Icon animations */
.edit-icon-enter-active[data-v-31061394],
.edit-icon-leave-active[data-v-31061394] {
transition: opacity 150ms ease, transform 150ms ease;
}
.edit-icon-enter-from[data-v-31061394] {
opacity: 0;
transform: scale(0.8);
}
.edit-icon-leave-to[data-v-31061394] {
opacity: 0;
transform: scale(0.8);
}
/* Settings header - Notion Style */
.settings-header[data-v-2f51192a] {
background: var(--navbar-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--navbar-separator);
}
.bg-separator[data-v-2f51192a] {
background: var(--navbar-separator);
}
.text-text-primary[data-v-2f51192a] {
color: var(--color-text-primary);
}
/* Notion Style Action Button */
.nav-action-button[data-v-2f51192a] {
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
flex-shrink: 0;
}
.nav-action-button[data-v-2f51192a]:hover {
background: var(--navbar-button-hover);
color: var(--color-text-primary);
}
.nav-action-button[data-v-2f51192a]:active {
background: var(--navbar-button-active);
}
.action-button[data-v-2f51192a]:hover {
background: var(--color-bg-tertiary);
border-color: var(--color-border-tertiary);
color: var(--color-text-primary);
}
/* Window control button styles */
.window-control-btn[data-v-2f51192a] {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
}
.window-control-btn[data-v-2f51192a]:hover {
color: var(--color-text-primary);
}
.spinner[data-v-bc45446e] {
width: 48px;
height: 48px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin-bc45446e 1s linear infinite;
margin: 0 auto;
}
@keyframes spin-bc45446e {
to {
transform: rotate(360deg);
}
}
.share-accept-page[data-v-33e88855] {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
padding: 2rem;
transition: background 0.3s ease;
}
@media (prefers-color-scheme: dark) {
.share-accept-page[data-v-33e88855] {
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}
}
.container[data-v-33e88855] {
background: white;
border-radius: 1.5rem;
padding: 3rem;
max-width: 500px;
width: 100%;
text-align: center;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
.container[data-v-33e88855] {
background: #1f2937;
border: 1px solid #374151;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
}
.processing[data-v-33e88855],
.error-state[data-v-33e88855],
.success-state[data-v-33e88855] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.spinner[data-v-33e88855] {
width: 56px;
height: 56px;
border: 4px solid #e5e7eb;
border-top: 4px solid var(--color-brand-primary);
border-radius: 50%;
animation: spin-33e88855 1s linear infinite;
}
@media (prefers-color-scheme: dark) {
.spinner[data-v-33e88855] {
border-color: #374151;
border-top-color: #818cf8;
}
}
@keyframes spin-33e88855 {
to {
transform: rotate(360deg);
}
}
.error-icon[data-v-33e88855] {
color: #ef4444;
width: 64px;
height: 64px;
stroke-width: 2.5;
}
.success-icon[data-v-33e88855] {
color: var(--color-brand-primary);
width: 64px;
height: 64px;
stroke-width: 2.5;
}
h2[data-v-33e88855] {
font-size: 1.75rem;
font-weight: 700;
margin: 0;
color: #111827;
letter-spacing: -0.025em;
}
@media (prefers-color-scheme: dark) {
h2[data-v-33e88855] {
color: #f9fafb;
}
}
p[data-v-33e88855] {
font-size: 1rem;
color: #6b7280;
margin: 0;
line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
p[data-v-33e88855] {
color: #9ca3af;
}
}
.workspace-info[data-v-33e88855] {
padding: 1rem 1.5rem;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border-radius: 0.75rem;
font-size: 0.9375rem;
margin-top: 0.5rem;
border: 1px solid #e5e7eb;
}
@media (prefers-color-scheme: dark) {
.workspace-info[data-v-33e88855] {
background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
border-color: #4b5563;
}
}
.workspace-info strong[data-v-33e88855] {
background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
}
.btn[data-v-33e88855] {
padding: 0.875rem 2rem;
border: none;
border-radius: 0.75rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 0.5rem;
}
.btn-primary[data-v-33e88855] {
background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
color: white;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
.btn-primary[data-v-33e88855]:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}
.btn-primary[data-v-33e88855]:active {
transform: translateY(0);
}
/* sass-plugin-1:/Users/maronato/Developer/vue-toastification/src/scss/index.scss */
.Vue-Toastification__container {
z-index: 9999;
position: fixed;
padding: 4px;
width: 600px;
box-sizing: border-box;
display: flex;
min-height: 100%;
color: #fff;
flex-direction: column;
pointer-events: none;
}
@media only screen and (min-width : 600px) {
.Vue-Toastification__container.top-left,
.Vue-Toastification__container.top-right,
.Vue-Toastification__container.top-center {
top: 1em;
}
.Vue-Toastification__container.bottom-left,
.Vue-Toastification__container.bottom-right,
.Vue-Toastification__container.bottom-center {
bottom: 1em;
flex-direction: column-reverse;
}
.Vue-Toastification__container.top-left,
.Vue-Toastification__container.bottom-left {
left: 1em;
}
.Vue-Toastification__container.top-left .Vue-Toastification__toast,
.Vue-Toastification__container.bottom-left .Vue-Toastification__toast {
margin-right: auto;
}
@supports not (-moz-appearance: none) {
.Vue-Toastification__container.top-left .Vue-Toastification__toast--rtl,
.Vue-Toastification__container.bottom-left .Vue-Toastification__toast--rtl {
margin-right: unset;
margin-left: auto;
}
}
.Vue-Toastification__container.top-right,
.Vue-Toastification__container.bottom-right {
right: 1em;
}
.Vue-Toastification__container.top-right .Vue-Toastification__toast,
.Vue-Toastification__container.bottom-right .Vue-Toastification__toast {
margin-left: auto;
}
@supports not (-moz-appearance: none) {
.Vue-Toastification__container.top-right .Vue-Toastification__toast--rtl,
.Vue-Toastification__container.bottom-right .Vue-Toastification__toast--rtl {
margin-left: unset;
margin-right: auto;
}
}
.Vue-Toastification__container.top-center,
.Vue-Toastification__container.bottom-center {
left: 50%;
margin-left: -300px;
}
.Vue-Toastification__container.top-center .Vue-Toastification__toast,
.Vue-Toastification__container.bottom-center .Vue-Toastification__toast {
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (max-width : 600px) {
.Vue-Toastification__container {
width: 100vw;
padding: 0;
left: 0;
margin: 0;
}
.Vue-Toastification__container .Vue-Toastification__toast {
width: 100%;
}
.Vue-Toastification__container.top-left,
.Vue-Toastification__container.top-right,
.Vue-Toastification__container.top-center {
top: 0;
}
.Vue-Toastification__container.bottom-left,
.Vue-Toastification__container.bottom-right,
.Vue-Toastification__container.bottom-center {
bottom: 0;
flex-direction: column-reverse;
}
}
.Vue-Toastification__toast {
display: inline-flex;
position: relative;
max-height: 800px;
min-height: 64px;
box-sizing: border-box;
margin-bottom: 1rem;
padding: 22px 24px;
border-radius: 8px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
justify-content: space-between;
font-family:
"Lato",
Helvetica,
"Roboto",
Arial,
sans-serif;
max-width: 600px;
min-width: 326px;
pointer-events: auto;
overflow: hidden;
transform: translateZ(0);
direction: ltr;
}
.Vue-Toastification__toast--rtl {
direction: rtl;
}
.Vue-Toastification__toast--default {
background-color: #1976d2;
color: #fff;
}
.Vue-Toastification__toast--info {
background-color: #2196f3;
color: #fff;
}
.Vue-Toastification__toast--success {
background-color: #4caf50;
color: #fff;
}
.Vue-Toastification__toast--error {
background-color: #ff5252;
color: #fff;
}
.Vue-Toastification__toast--warning {
background-color: #ffc107;
color: #fff;
}
@media only screen and (max-width : 600px) {
.Vue-Toastification__toast {
border-radius: 0px;
margin-bottom: 0.5rem;
}
}
.Vue-Toastification__toast-body {
flex: 1;
line-height: 24px;
font-size: 16px;
word-break: break-word;
white-space: pre-wrap;
}
.Vue-Toastification__toast-component-body {
flex: 1;
}
.Vue-Toastification__toast.disable-transition {
animation: none !important;
}
.Vue-Toastification__close-button {
font-weight: bold;
font-size: 24px;
line-height: 24px;
background: transparent;
outline: none;
border: none;
padding: 0;
padding-left: 10px;
cursor: pointer;
transition: 0.3s ease;
align-items: center;
color: #fff;
opacity: 0.3;
transition: visibility 0s, opacity 0.2s linear;
}
.Vue-Toastification__close-button:hover,
.Vue-Toastification__close-button:focus {
opacity: 1;
}
.Vue-Toastification__toast:not(:hover) .Vue-Toastification__close-button.show-on-hover {
opacity: 0;
}
.Vue-Toastification__toast--rtl .Vue-Toastification__close-button {
padding-left: unset;
padding-right: 10px;
}
@keyframes scale-x-frames {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
.Vue-Toastification__progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
z-index: 10000;
background-color: rgba(255, 255, 255, 0.7);
transform-origin: left;
animation: scale-x-frames linear 1 forwards;
}
.Vue-Toastification__toast--rtl .Vue-Toastification__progress-bar {
right: 0;
left: unset;
transform-origin: right;
}
.Vue-Toastification__icon {
margin: auto 18px auto 0px;
background: transparent;
outline: none;
border: none;
padding: 0;
transition: 0.3s ease;
align-items: center;
width: 20px;
height: 100%;
}
.Vue-Toastification__toast--rtl .Vue-Toastification__icon {
margin: auto 0px auto 18px;
}
@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
@keyframes bounceOutRight {
40% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(1000px, 0, 0);
}
}
@keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
to {
transform: none;
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes bounceInUp {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceOutUp {
20% {
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
@keyframes bounceOutDown {
20% {
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.Vue-Toastification__bounce-enter-active.top-left,
.Vue-Toastification__bounce-enter-active.bottom-left {
animation-name: bounceInLeft;
}
.Vue-Toastification__bounce-enter-active.top-right,
.Vue-Toastification__bounce-enter-active.bottom-right {
animation-name: bounceInRight;
}
.Vue-Toastification__bounce-enter-active.top-center {
animation-name: bounceInDown;
}
.Vue-Toastification__bounce-enter-active.bottom-center {
animation-name: bounceInUp;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).top-left,
.Vue-Toastification__bounce-leave-active:not(.disable-transition).bottom-left {
animation-name: bounceOutLeft;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).top-right,
.Vue-Toastification__bounce-leave-active:not(.disable-transition).bottom-right {
animation-name: bounceOutRight;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).top-center {
animation-name: bounceOutUp;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).bottom-center {
animation-name: bounceOutDown;
}
.Vue-Toastification__bounce-leave-active,
.Vue-Toastification__bounce-enter-active {
animation-duration: 750ms;
animation-fill-mode: both;
}
.Vue-Toastification__bounce-move {
transition-timing-function: ease-in-out;
transition-property: all;
transition-duration: 400ms;
}
@keyframes fadeOutTop {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-50px);
opacity: 0;
}
}
@keyframes fadeOutLeft {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-50px);
opacity: 0;
}
}
@keyframes fadeOutBottom {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(50px);
opacity: 0;
}
}
@keyframes fadeOutRight {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(50px);
opacity: 0;
}
}
@keyframes fadeInLeft {
0% {
transform: translateX(-50px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeInRight {
0% {
transform: translateX(50px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeInTop {
0% {
transform: translateY(-50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeInBottom {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.Vue-Toastification__fade-enter-active.top-left,
.Vue-Toastification__fade-enter-active.bottom-left {
animation-name: fadeInLeft;
}
.Vue-Toastification__fade-enter-active.top-right,
.Vue-Toastification__fade-enter-active.bottom-right {
animation-name: fadeInRight;
}
.Vue-Toastification__fade-enter-active.top-center {
animation-name: fadeInTop;
}
.Vue-Toastification__fade-enter-active.bottom-center {
animation-name: fadeInBottom;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).top-left,
.Vue-Toastification__fade-leave-active:not(.disable-transition).bottom-left {
animation-name: fadeOutLeft;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).top-right,
.Vue-Toastification__fade-leave-active:not(.disable-transition).bottom-right {
animation-name: fadeOutRight;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).top-center {
animation-name: fadeOutTop;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).bottom-center {
animation-name: fadeOutBottom;
}
.Vue-Toastification__fade-leave-active,
.Vue-Toastification__fade-enter-active {
animation-duration: 750ms;
animation-fill-mode: both;
}
.Vue-Toastification__fade-move {
transition-timing-function: ease-in-out;
transition-property: all;
transition-duration: 400ms;
}
@keyframes slideInBlurredLeft {
0% {
transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
transform-origin: 100% 50%;
filter: blur(40px);
opacity: 0;
}
100% {
transform: translateX(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}
@keyframes slideInBlurredTop {
0% {
transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
transform-origin: 50% 0%;
filter: blur(240px);
opacity: 0;
}
100% {
transform: translateY(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}
@keyframes slideInBlurredRight {
0% {
transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
transform-origin: 0% 50%;
filter: blur(40px);
opacity: 0;
}
100% {
transform: translateX(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}
@keyframes slideInBlurredBottom {
0% {
transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
transform-origin: 50% 100%;
filter: blur(240px);
opacity: 0;
}
100% {
transform: translateY(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
}
@keyframes slideOutBlurredTop {
0% {
transform: translateY(0) scaleY(1) scaleX(1);
transform-origin: 50% 0%;
filter: blur(0);
opacity: 1;
}
100% {
transform: translateY(-1000px) scaleY(2) scaleX(0.2);
transform-origin: 50% 0%;
filter: blur(240px);
opacity: 0;
}
}
@keyframes slideOutBlurredBottom {
0% {
transform: translateY(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
100% {
transform: translateY(1000px) scaleY(2) scaleX(0.2);
transform-origin: 50% 100%;
filter: blur(240px);
opacity: 0;
}
}
@keyframes slideOutBlurredLeft {
0% {
transform: translateX(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
100% {
transform: translateX(-1000px) scaleX(2) scaleY(0.2);
transform-origin: 100% 50%;
filter: blur(40px);
opacity: 0;
}
}
@keyframes slideOutBlurredRight {
0% {
transform: translateX(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}
100% {
transform: translateX(1000px) scaleX(2) scaleY(0.2);
transform-origin: 0% 50%;
filter: blur(40px);
opacity: 0;
}
}
.Vue-Toastification__slideBlurred-enter-active.top-left,
.Vue-Toastification__slideBlurred-enter-active.bottom-left {
animation-name: slideInBlurredLeft;
}
.Vue-Toastification__slideBlurred-enter-active.top-right,
.Vue-Toastification__slideBlurred-enter-active.bottom-right {
animation-name: slideInBlurredRight;
}
.Vue-Toastification__slideBlurred-enter-active.top-center {
animation-name: slideInBlurredTop;
}
.Vue-Toastification__slideBlurred-enter-active.bottom-center {
animation-name: slideInBlurredBottom;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).top-left,
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).bottom-left {
animation-name: slideOutBlurredLeft;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).top-right,
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).bottom-right {
animation-name: slideOutBlurredRight;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).top-center {
animation-name: slideOutBlurredTop;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).bottom-center {
animation-name: slideOutBlurredBottom;
}
.Vue-Toastification__slideBlurred-leave-active,
.Vue-Toastification__slideBlurred-enter-active {
animation-duration: 750ms;
animation-fill-mode: both;
}
.Vue-Toastification__slideBlurred-move {
transition-timing-function: ease-in-out;
transition-property: all;
transition-duration: 400ms;
}
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/assets/material-icons-kAwBdRge.woff2") format("woff2"), url("/assets/material-icons-Dr0goTwe.woff") format("woff");
}
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
@font-face {
font-family: "Material Icons Outlined";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/assets/material-icons-outlined-DZhiGvEA.woff2") format("woff2"), url("/assets/material-icons-outlined-BpWbwl2n.woff") format("woff");
}
.material-icons-outlined {
font-family: "Material Icons Outlined";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
@font-face {
font-family: "Material Icons Round";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/assets/material-icons-round-DrirKXBx.woff2") format("woff2"), url("/assets/material-icons-round-BDlwx-sv.woff") format("woff");
}
.material-icons-round {
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
@font-face {
font-family: "Material Icons Sharp";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/assets/material-icons-sharp-gidztirS.woff2") format("woff2"), url("/assets/material-icons-sharp-CH1KkVu7.woff") format("woff");
}
.material-icons-sharp {
font-family: "Material Icons Sharp";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
@font-face {
font-family: "Material Icons Two Tone";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/assets/material-icons-two-tone-DuNIpaEj.woff2") format("woff2"), url("/assets/material-icons-two-tone-B7wz7mED.woff") format("woff");
}
.material-icons-two-tone {
font-family: "Material Icons Two Tone";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
/* Material Icons setup - use local npm package only */
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/assets/material-icons-kAwBdRge.woff2") format("woff2"), url("/assets/material-icons-Dr0goTwe.woff") format("woff");
}
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
@font-face {
font-family: "Material Icons Outlined";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/assets/material-icons-outlined-DZhiGvEA.woff2") format("woff2"), url("/assets/material-icons-outlined-BpWbwl2n.woff") format("woff");
}
.material-icons-outlined {
font-family: "Material Icons Outlined";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
@font-face {
font-family: "Material Icons Round";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/assets/material-icons-round-DrirKXBx.woff2") format("woff2"), url("/assets/material-icons-round-BDlwx-sv.woff") format("woff");
}
.material-icons-round {
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
@font-face {
font-family: "Material Icons Sharp";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/assets/material-icons-sharp-gidztirS.woff2") format("woff2"), url("/assets/material-icons-sharp-CH1KkVu7.woff") format("woff");
}
.material-icons-sharp {
font-family: "Material Icons Sharp";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
@font-face {
font-family: "Material Icons Two Tone";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("/assets/material-icons-two-tone-DuNIpaEj.woff2") format("woff2"), url("/assets/material-icons-two-tone-B7wz7mED.woff") format("woff");
}
.material-icons-two-tone {
font-family: "Material Icons Two Tone";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
/* Import the new color system */
/**
* DocMind 护眼专业配色系统
* 支持 Dark/Light 主题切换
* 深蓝强调色 | 5层背景层级 | 护眼色彩方案
*/
/* Dark Mode (默认) */
:root {
/* ===== 背景色层级 (5层) ===== */
--color-bg-primary: #181b20; /* 主背景 - 最深层 */
--color-bg-secondary: #20242a; /* 卡片/面板/编辑器 */
--color-bg-tertiary: #2a2f37; /* 输入框/代码块 */
--color-bg-hover: #303640; /* 悬停状态 */
--color-bg-active: #373d48; /* 激活/选中状态 */
--color-bg-elevated: #20242a; /* 悬浮层 (同secondary) */
/* RGB values for alpha transparency */
--color-bg-primary-rgb: 24, 27, 32;
--color-bg-secondary-rgb: 32, 36, 42;
--color-bg-tertiary-rgb: 42, 47, 55;
--color-bg-hover-rgb: 48, 54, 63;
--color-bg-active-rgb: 55, 61, 72;
--color-bg-elevated-rgb: 32, 36, 42;
/* 旧的交互状态背景 (保留兼容性) */
--color-bg-selected: rgba(96, 165, 250, 0.15);
/* ===== 文字色层级 (4层) ===== */
--color-text-primary: #e2e8f0; /* 主文字 - 高对比度 */
--color-text-secondary: #94a3b8; /* 次级文字 */
--color-text-tertiary: #64748b; /* 三级/占位符 */
--color-text-disabled: #475569; /* 禁用状态 */
/* ===== 边框色 (3层) ===== */
--color-border-primary: #2d323a; /* 常规边框 */
--color-border-subtle: rgba(148, 163, 184, 0.1); /* 细微边框 */
--color-border-strong: #475569; /* 强调边框 */
/* ===== 强调色 - 亮蓝 Blue ===== */
--color-brand-primary: #60a5fa; /* 主强调色 - 亮蓝 Blue 400 */
--color-brand-secondary: #93c5fd; /* 悬停状态 - 更亮的蓝色 Blue 300 */
/* Brand color RGB values */
--color-brand-primary-rgb: 96, 165, 250;
--color-brand-secondary-rgb: 147, 197, 253;
/* Brand color translucent variants */
--color-brand-primary-05: rgba(var(--color-brand-primary-rgb), 0.05);
--color-brand-primary-10: rgba(var(--color-brand-primary-rgb), 0.10);
--color-brand-primary-15: rgba(var(--color-brand-primary-rgb), 0.15);
--color-brand-primary-20: rgba(var(--color-brand-primary-rgb), 0.20);
--color-brand-primary-30: rgba(var(--color-brand-primary-rgb), 0.30);
--color-brand-primary-40: rgba(var(--color-brand-primary-rgb), 0.40);
--color-brand-secondary-05: rgba(var(--color-brand-secondary-rgb), 0.05);
--color-brand-secondary-10: rgba(var(--color-brand-secondary-rgb), 0.10);
--color-brand-secondary-15: rgba(var(--color-brand-secondary-rgb), 0.15);
--color-brand-secondary-20: rgba(var(--color-brand-secondary-rgb), 0.20);
--color-brand-secondary-30: rgba(var(--color-brand-secondary-rgb), 0.30);
--color-brand-secondary-40: rgba(var(--color-brand-secondary-rgb), 0.40);
/* ===== 状态色 ===== */
--color-success: #4ade80; /* 成功 - 绿色 Green 400 */
--color-warning: #facc15; /* 警告 - 黄色 Yellow 400 */
--color-error: #f87171; /* 错误 - 红色 Red 400 */
--color-info: #60a5fa; /* 信息 - 蓝色 Blue 400 */
/* 状态色的背景变体 */
--color-success-bg: rgba(74, 222, 128, 0.15);
--color-warning-bg: rgba(250, 204, 21, 0.15);
--color-error-bg: rgba(248, 113, 113, 0.15);
--color-info-bg: rgba(96, 165, 250, 0.15);
/* ===== 特殊用途色 ===== */
/* AI 相关 - 使用亮蓝色系 */
--color-ai-primary: #60a5fa; /* AI 指示色 - 亮蓝 */
--color-ai-bg: rgba(96, 165, 250, 0.08);
--color-ai-highlight: rgba(96, 165, 250, 0.15);
--color-ai-gradient-start: rgba(96, 165, 250, 0.1);
--color-ai-gradient-end: rgba(147, 197, 253, 0.1);
/* 代码相关 */
--color-code-bg: #1a1d23;
--color-code-added: #4ade80;
--color-code-removed: #f87171;
--color-code-modified: #facc15;
/* ===== Notion 风格导航栏专用色 ===== */
--navbar-bg: rgba(32, 36, 42, 0.8);
--navbar-button-hover: rgba(255, 255, 255, 0.06);
--navbar-button-active: rgba(255, 255, 255, 0.1);
--navbar-separator: rgba(255, 255, 255, 0.08);
/* ===== 阴影 ===== */
--shadow-color-rgb: 0, 0, 0;
--shadow-sm: 0 1px 2px 0 rgba(var(--shadow-color-rgb), 0.5);
--shadow-md: 0 4px 6px -1px rgba(var(--shadow-color-rgb), 0.5);
--shadow-lg: 0 10px 15px -3px rgba(var(--shadow-color-rgb), 0.5);
--shadow-xl: 0 20px 25px -5px rgba(var(--shadow-color-rgb), 0.5);
}
/* Light Mode */
[data-theme="light"] {
/* ===== 背景色层级 (5层) ===== */
--color-bg-primary: #fafafa; /* 主背景 - 柔和灰白 */
--color-bg-secondary: #ffffff; /* 卡片/面板/编辑器 */
--color-bg-tertiary: #f5f5f5; /* 输入框/代码块 */
--color-bg-hover: #f0f0f0; /* 悬停状态 */
--color-bg-active: #ebebeb; /* 激活/选中状态 */
--color-bg-elevated: #ffffff; /* 悬浮层 (同secondary) */
/* RGB values for alpha transparency */
--color-bg-primary-rgb: 250, 250, 250;
--color-bg-secondary-rgb: 255, 255, 255;
--color-bg-tertiary-rgb: 245, 245, 245;
--color-bg-hover-rgb: 240, 240, 240;
--color-bg-active-rgb: 235, 235, 235;
--color-bg-elevated-rgb: 255, 255, 255;
/* 旧的交互状态背景 (保留兼容性) */
--color-bg-selected: rgba(219, 234, 254, 0.8);
/* ===== 文字色层级 (4层) ===== */
--color-text-primary: #171717; /* 主文字 - 深黑 */
--color-text-secondary: #52525b; /* 次级文字 */
--color-text-tertiary: #a1a1aa; /* 三级/占位符 */
--color-text-disabled: #d4d4d8; /* 禁用状态 */
/* ===== 边框色 (3层) ===== */
--color-border-primary: #e4e4e7; /* 常规边框 */
--color-border-subtle: rgba(0, 0, 0, 0.06); /* 细微边框 */
--color-border-strong: #a1a1aa; /* 强调边框 */
/* ===== 强调色 - 深蓝 Blue ===== */
--color-brand-primary: #1e3a8a; /* 主强调色 - 深蓝 Blue 900 */
--color-brand-secondary: #1d4ed8; /* 悬停状态 - 亮一点的蓝色 Blue 700 */
/* Brand color RGB values */
--color-brand-primary-rgb: 30, 58, 138;
--color-brand-secondary-rgb: 29, 78, 216;
/* Brand color translucent variants */
--color-brand-primary-05: rgba(var(--color-brand-primary-rgb), 0.05);
--color-brand-primary-10: rgba(var(--color-brand-primary-rgb), 0.10);
--color-brand-primary-15: rgba(var(--color-brand-primary-rgb), 0.15);
--color-brand-primary-20: rgba(var(--color-brand-primary-rgb), 0.20);
--color-brand-primary-30: rgba(var(--color-brand-primary-rgb), 0.30);
--color-brand-primary-40: rgba(var(--color-brand-primary-rgb), 0.40);
--color-brand-secondary-05: rgba(var(--color-brand-secondary-rgb), 0.05);
--color-brand-secondary-10: rgba(var(--color-brand-secondary-rgb), 0.10);
--color-brand-secondary-15: rgba(var(--color-brand-secondary-rgb), 0.15);
--color-brand-secondary-20: rgba(var(--color-brand-secondary-rgb), 0.20);
--color-brand-secondary-30: rgba(var(--color-brand-secondary-rgb), 0.30);
--color-brand-secondary-40: rgba(var(--color-brand-secondary-rgb), 0.40);
/* ===== 状态色 ===== */
--color-success: #22c55e; /* 成功 - 绿色 Green 500 */
--color-warning: #eab308; /* 警告 - 黄色 Yellow 500 */
--color-error: #ef4444; /* 错误 - 红色 Red 500 */
--color-info: #3b82f6; /* 信息 - 蓝色 Blue 500 */
/* 状态色的背景变体 */
--color-success-bg: rgba(34, 197, 94, 0.1);
--color-warning-bg: rgba(234, 179, 8, 0.1);
--color-error-bg: rgba(239, 68, 68, 0.1);
--color-info-bg: rgba(59, 130, 246, 0.1);
/* ===== 特殊用途色 ===== */
/* AI 相关 - 使用深蓝色系 */
--color-ai-primary: #1e3a8a; /* AI 指示色 - 深蓝 */
--color-ai-bg: rgba(30, 58, 138, 0.08);
--color-ai-highlight: rgba(30, 58, 138, 0.15);
--color-ai-gradient-start: rgba(30, 58, 138, 0.08);
--color-ai-gradient-end: rgba(29, 78, 216, 0.08);
/* 代码相关 */
--color-code-bg: #f5f5f5;
/* ===== Notion 风格导航栏专用色 ===== */
--navbar-bg: rgba(255, 255, 255, 0.8);
--navbar-button-hover: rgba(0, 0, 0, 0.05);
--navbar-button-active: rgba(0, 0, 0, 0.08);
--navbar-separator: rgba(0, 0, 0, 0.08);
/* ===== 阴影 ===== */
--shadow-color-rgb: 0, 0, 0;
--shadow-sm: 0 1px 3px 0 rgba(var(--shadow-color-rgb), 0.1), 0 1px 2px 0 rgba(var(--shadow-color-rgb), 0.06);
--shadow-md: 0 4px 6px -1px rgba(var(--shadow-color-rgb), 0.1), 0 2px 4px -1px rgba(var(--shadow-color-rgb), 0.06);
--shadow-lg: 0 10px 15px -3px rgba(var(--shadow-color-rgb), 0.1), 0 4px 6px -2px rgba(var(--shadow-color-rgb), 0.05);
--shadow-xl: 0 20px 25px -5px rgba(var(--shadow-color-rgb), 0.1), 0 10px 10px -5px rgba(var(--shadow-color-rgb), 0.04);
}
/* 为了向后兼容，保留旧的 CSS 变量映射 */
:root {
/* 旧变量名映射到新系统 */
--main-bg: var(--color-bg-primary);
--panel-bg: var(--color-bg-secondary);
--sidebar-bg: var(--color-bg-tertiary);
--text-primary: var(--color-text-primary);
--text-secondary: var(--color-text-secondary);
--accent-blue: var(--color-brand-primary);
--border-color: var(--color-border-primary);
--ai-bg: var(--color-ai-bg);
--ai-highlight: var(--color-ai-highlight);
}
/* Light Mode 下也需要更新旧变量映射 */
[data-theme="light"] {
/* 确保旧变量也能正确切换 */
--main-bg: var(--color-bg-primary);
--panel-bg: var(--color-bg-secondary);
--sidebar-bg: var(--color-bg-tertiary);
--text-primary: var(--color-text-primary);
--text-secondary: var(--color-text-secondary);
--accent-blue: var(--color-brand-primary);
--border-color: var(--color-border-primary);
--ai-bg: var(--color-ai-bg);
--ai-highlight: var(--color-ai-highlight);
}
/* ===== 全局样式增强 ===== */
/* 平滑过渡动画 */
* {
transition-property: background-color, border-color, color, box-shadow;
transition-duration: 200ms;
transition-timing-function: ease-in-out;
}
/* 禁用某些元素的过渡效果 */
.no-transition,
.no-transition * {
transition: none !important;
}
/* 选中文字样式 */
::-moz-selection {
background-color: rgba(var(--color-brand-primary-rgb), 0.2);
color: var(--color-text-primary);
}
::selection {
background-color: rgba(var(--color-brand-primary-rgb), 0.2);
color: var(--color-text-primary);
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--color-border-primary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-border-strong);
}
/* Focus 样式 */
*:focus-visible {
outline: 2px solid var(--color-brand-primary);
outline-offset: 2px;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
/* Ensure html and body do not exceed viewport height */
html, body, #app {
height: 100%;
overflow: hidden;
}
/* 基础样式设置 */
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--color-bg-primary);
color: var(--text-primary);
}
/* 确保所有文本元素使用正确的颜色 */
h1, h2, h3, h4, h5, h6 {
color: var(--text-primary);
}
p, span, div {
color: inherit;
}
/* 链接颜色 */
a {
color: var(--color-brand-primary);
}
a:hover {
color: var(--color-brand-secondary);
}
.\!container {
width: 100% !important;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.\!container {
max-width: 640px !important;
}
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.\!container {
max-width: 768px !important;
}
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.\!container {
max-width: 1024px !important;
}
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.\!container {
max-width: 1280px !important;
}
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.\!container {
max-width: 1536px !important;
}
.container {
max-width: 1536px;
}
}
/* Custom Select Styling */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
.\!visible {
visibility: visible !important;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.-right-1 {
right: -0.25rem;
}
.-top-1 {
top: -0.25rem;
}
.bottom-0 {
bottom: 0px;
}
.bottom-24 {
bottom: 6rem;
}
.bottom-3 {
bottom: 0.75rem;
}
.bottom-4 {
bottom: 1rem;
}
.bottom-full {
bottom: 100%;
}
.left-0 {
left: 0px;
}
.left-1\/2 {
left: 50%;
}
.left-2 {
left: 0.5rem;
}
.left-3 {
left: 0.75rem;
}
.left-4 {
left: 1rem;
}
.right-0 {
right: 0px;
}
.right-2 {
right: 0.5rem;
}
.right-3 {
right: 0.75rem;
}
.right-4 {
right: 1rem;
}
.right-8 {
right: 2rem;
}
.top-0 {
top: 0px;
}
.top-1\/2 {
top: 50%;
}
.top-2 {
top: 0.5rem;
}
.top-3 {
top: 0.75rem;
}
.top-6 {
top: 1.5rem;
}
.top-8 {
top: 2rem;
}
.top-full {
top: 100%;
}
.isolate {
isolation: isolate;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}
.z-\[10000\] {
z-index: 10000;
}
.z-\[100\] {
z-index: 100;
}
.z-\[9999\] {
z-index: 9999;
}
.-mx-1 {
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mb-0\.5 {
margin-bottom: 0.125rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-1\.5 {
margin-bottom: 0.375rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-1\.5 {
margin-left: 0.375rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-4 {
margin-left: 1rem;
}
.ml-auto {
margin-left: auto;
}
.mr-0\.5 {
margin-right: 0.125rem;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-1\.5 {
margin-right: 0.375rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-4 {
margin-right: 1rem;
}
.mt-0\.5 {
margin-top: 0.125rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-auto {
margin-top: auto;
}
.box-border {
box-sizing: border-box;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.line-clamp-4 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.line-clamp-6 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
}
.line-clamp-\[12\] {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 12;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.\!table {
display: table !important;
}
.table {
display: table;
}
.grid {
display: grid;
}
.contents {
display: contents;
}
.list-item {
display: list-item;
}
.hidden {
display: none;
}
.aspect-\[8\.5\/11\] {
aspect-ratio: 8.5/11;
}
.h-0 {
height: 0px;
}
.h-1 {
height: 0.25rem;
}
.h-1\.5 {
height: 0.375rem;
}
.h-10 {
height: 2.5rem;
}
.h-12 {
height: 3rem;
}
.h-14 {
height: 3.5rem;
}
.h-16 {
height: 4rem;
}
.h-2 {
height: 0.5rem;
}
.h-24 {
height: 6rem;
}
.h-28 {
height: 7rem;
}
.h-3 {
height: 0.75rem;
}
.h-3\.5 {
height: 0.875rem;
}
.h-32 {
height: 8rem;
}
.h-4 {
height: 1rem;
}
.h-44 {
height: 11rem;
}
.h-5 {
height: 1.25rem;
}
.h-6 {
height: 1.5rem;
}
.h-7 {
height: 1.75rem;
}
.h-8 {
height: 2rem;
}
.h-9 {
height: 2.25rem;
}
.h-\[170px\] {
height: 170px;
}
.h-\[68px\] {
height: 68px;
}
.h-\[var\(--radix-select-trigger-height\)\] {
height: var(--radix-select-trigger-height);
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.h-screen {
height: 100vh;
}
.max-h-32 {
max-height: 8rem;
}
.max-h-64 {
max-height: 16rem;
}
.max-h-80 {
max-height: 20rem;
}
.max-h-96 {
max-height: 24rem;
}
.max-h-\[80vh\] {
max-height: 80vh;
}
.max-h-\[90vh\] {
max-height: 90vh;
}
.min-h-0 {
min-height: 0px;
}
.min-h-\[200px\] {
min-height: 200px;
}
.min-h-\[80px\] {
min-height: 80px;
}
.min-h-\[calc\(100vh-200px\)\] {
min-height: calc(100vh - 200px);
}
.min-h-full {
min-height: 100%;
}
.min-h-screen {
min-height: 100vh;
}
.w-0 {
width: 0px;
}
.w-1 {
width: 0.25rem;
}
.w-10 {
width: 2.5rem;
}
.w-11 {
width: 2.75rem;
}
.w-12 {
width: 3rem;
}
.w-14 {
width: 3.5rem;
}
.w-16 {
width: 4rem;
}
.w-2 {
width: 0.5rem;
}
.w-24 {
width: 6rem;
}
.w-3 {
width: 0.75rem;
}
.w-3\.5 {
width: 0.875rem;
}
.w-3\/4 {
width: 75%;
}
.w-32 {
width: 8rem;
}
.w-36 {
width: 9rem;
}
.w-4 {
width: 1rem;
}
.w-40 {
width: 10rem;
}
.w-48 {
width: 12rem;
}
.w-5 {
width: 1.25rem;
}
.w-56 {
width: 14rem;
}
.w-6 {
width: 1.5rem;
}
.w-7 {
width: 1.75rem;
}
.w-72 {
width: 18rem;
}
.w-8 {
width: 2rem;
}
.w-80 {
width: 20rem;
}
.w-9 {
width: 2.25rem;
}
.w-\[280px\] {
width: 280px;
}
.w-auto {
width: auto;
}
.w-full {
width: 100%;
}
.w-px {
width: 1px;
}
.min-w-0 {
min-width: 0px;
}
.min-w-80 {
min-width: 20rem;
}
.min-w-\[140px\] {
min-width: 140px;
}
.min-w-\[45\%\] {
min-width: 45%;
}
.min-w-\[8rem\] {
min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-48 {
max-width: 12rem;
}
.max-w-4xl {
max-width: 56rem;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-6xl {
max-width: 72rem;
}
.max-w-7xl {
max-width: 80rem;
}
.max-w-\[150px\] {
max-width: 150px;
}
.max-w-\[50vw\] {
max-width: 50vw;
}
.max-w-full {
max-width: 100%;
}
.max-w-lg {
max-width: 32rem;
}
.max-w-md {
max-width: 28rem;
}
.max-w-none {
max-width: none;
}
.max-w-screen-2xl {
max-width: 1536px;
}
.max-w-xs {
max-width: 20rem;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-none {
flex: none;
}
.flex-shrink {
flex-shrink: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
.origin-top-left {
transform-origin: top left;
}
.origin-top-right {
transform-origin: top right;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1 {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6 {
--tw-translate-x: 1.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-4 {
--tw-translate-y: 1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.animate-ping {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {
50% {
opacity: .5;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.cursor-col-resize {
cursor: col-resize;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.resize {
resize: both;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-0\.5 {
gap: 0.125rem;
}
.gap-1 {
gap: 0.25rem;
}
.gap-1\.5 {
gap: 0.375rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-2\.5 {
gap: 0.625rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-6 {
gap: 1.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whitespace-nowrap {
white-space: nowrap;
}
.whitespace-pre-line {
white-space: pre-line;
}
.whitespace-pre-wrap {
white-space: pre-wrap;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-\[10px\] {
border-radius: 10px;
}
.rounded-\[12px\] {
border-radius: 12px;
}
.rounded-\[13px\] {
border-radius: 13px;
}
.rounded-\[6px\] {
border-radius: 6px;
}
.rounded-\[8px\] {
border-radius: 8px;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-sm {
border-radius: 0.125rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-b-xl {
border-bottom-right-radius: 0.75rem;
border-bottom-left-radius: 0.75rem;
}
.rounded-r {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.rounded-r-sm {
border-top-right-radius: 0.125rem;
border-bottom-right-radius: 0.125rem;
}
.rounded-t-xl {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.border {
border-width: 1px;
}
.border-0 {
border-width: 0px;
}
.border-2 {
border-width: 2px;
}
.border-b {
border-bottom-width: 1px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-l {
border-left-width: 1px;
}
.border-l-2 {
border-left-width: 2px;
}
.border-l-4 {
border-left-width: 4px;
}
.border-r {
border-right-width: 1px;
}
.border-t {
border-top-width: 1px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-t-\[3px\] {
border-top-width: 3px;
}
.border-dashed {
border-style: dashed;
}
.border-\[var\(--color-border-primary\)\] {
border-color: var(--color-border-primary);
}
.border-\[var\(--color-brand-primary\)\] {
border-color: var(--color-brand-primary);
}
.border-border-primary {
border-color: var(--color-border-primary);
}
.border-border-subtle {
border-color: var(--color-border-subtle);
}
.border-brand-primary {
border-color: var(--color-brand-primary);
}
.border-gray-100 {
--tw-border-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-green-500\/30 {
border-color: rgb(34 197 94 / 0.3);
}
.border-neutral-200 {
--tw-border-opacity: 1;
border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
}
.border-orange-500\/30 {
border-color: rgb(249 115 22 / 0.3);
}
.border-red-200 {
--tw-border-opacity: 1;
border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-500 {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-success {
border-color: var(--color-success);
}
.border-transparent {
border-color: transparent;
}
.border-yellow-400 {
--tw-border-opacity: 1;
border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.border-t-\[var\(--color-brand-primary\)\] {
border-top-color: var(--color-brand-primary);
}
.border-t-\[var\(--color-status-info\)\] {
border-top-color: var(--color-status-info);
}
.border-t-\[var\(--color-status-warning\)\] {
border-top-color: var(--color-status-warning);
}
.border-t-transparent {
border-top-color: transparent;
}
.border-opacity-50 {
--tw-border-opacity: 0.5;
}
.bg-\[var\(--color-bg-hover\)\] {
background-color: var(--color-bg-hover);
}
.bg-\[var\(--color-bg-quaternary\)\] {
background-color: var(--color-bg-quaternary);
}
.bg-\[var\(--color-bg-secondary\)\] {
background-color: var(--color-bg-secondary);
}
.bg-\[var\(--color-bg-tertiary\)\] {
background-color: var(--color-bg-tertiary);
}
.bg-\[var\(--color-brand-primary\)\] {
background-color: var(--color-brand-primary);
}
.bg-\[var\(--color-brand-primary-10\)\] {
background-color: var(--color-brand-primary-10);
}
.bg-\[var\(--color-brand-primary-20\)\] {
background-color: var(--color-brand-primary-20);
}
.bg-\[var\(--color-brand-primary-bg\)\] {
background-color: var(--color-brand-primary-bg);
}
.bg-\[var\(--color-status-success\)\] {
background-color: var(--color-status-success);
}
.bg-\[var\(--color-status-warning-bg\)\] {
background-color: var(--color-status-warning-bg);
}
.bg-ai-bg {
background-color: var(--ai-bg);
}
.bg-bg-elevated {
background-color: var(--color-bg-elevated);
}
.bg-bg-hover {
background-color: var(--color-bg-hover);
}
.bg-bg-primary {
background-color: var(--color-bg-primary);
}
.bg-bg-secondary {
background-color: var(--color-bg-secondary);
}
.bg-bg-selected {
background-color: var(--color-bg-selected);
}
.bg-bg-tertiary {
background-color: var(--color-bg-tertiary);
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/25 {
background-color: rgb(0 0 0 / 0.25);
}
.bg-black\/50 {
background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/70 {
background-color: rgb(0 0 0 / 0.7);
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-border-primary {
background-color: var(--color-border-primary);
}
.bg-brand-primary {
background-color: var(--color-brand-primary);
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
--tw-bg-opacity: 1;
background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-100\/20 {
background-color: rgb(220 252 231 / 0.2);
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
--tw-bg-opacity: 1;
background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-green-600\/20 {
background-color: rgb(22 163 74 / 0.2);
}
.bg-neutral-100 {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-orange-600\/20 {
background-color: rgb(234 88 12 / 0.2);
}
.bg-pink-500 {
--tw-bg-opacity: 1;
background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-100\/10 {
background-color: rgb(254 226 226 / 0.1);
}
.bg-red-100\/20 {
background-color: rgb(254 226 226 / 0.2);
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-success {
background-color: var(--color-success);
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-opacity-10 {
--tw-bg-opacity: 0.1;
}
.bg-opacity-30 {
--tw-bg-opacity: 0.3;
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.bg-opacity-95 {
--tw-bg-opacity: 0.95;
}
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-bg-secondary {
--tw-gradient-from: var(--color-bg-secondary) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-primary {
--tw-gradient-from: var(--color-brand-primary) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-600 {
--tw-gradient-from: #9333ea var(--tw-gradient-from-position);
--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-brand-secondary {
--tw-gradient-to: var(--color-brand-secondary) var(--tw-gradient-to-position);
}
.to-transparent {
--tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-violet-600 {
--tw-gradient-to: #7c3aed var(--tw-gradient-to-position);
}
.p-0\.5 {
padding: 0.125rem;
}
.p-1 {
padding: 0.25rem;
}
.p-1\.5 {
padding: 0.375rem;
}
.p-2 {
padding: 0.5rem;
}
.p-2\.5 {
padding: 0.625rem;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-1\.5 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-20 {
padding-bottom: 5rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pl-1 {
padding-left: 0.25rem;
}
.pl-10 {
padding-left: 2.5rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.pl-3 {
padding-left: 0.75rem;
}
.pl-6 {
padding-left: 1.5rem;
}
.pl-9 {
padding-left: 2.25rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.pr-3 {
padding-right: 0.75rem;
}
.pr-4 {
padding-right: 1rem;
}
.pr-9 {
padding-right: 2.25rem;
}
.pt-0 {
padding-top: 0px;
}
.pt-12 {
padding-top: 3rem;
}
.pt-16 {
padding-top: 4rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.align-middle {
vertical-align: middle;
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-\[10px\] {
font-size: 10px;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-none {
line-height: 1;
}
.leading-relaxed {
line-height: 1.625;
}
.leading-tight {
line-height: 1.25;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.text-\[var\(--color-brand-primary\)\] {
color: var(--color-brand-primary);
}
.text-\[var\(--color-status-error\)\] {
color: var(--color-status-error);
}
.text-\[var\(--color-status-warning\)\] {
color: var(--color-status-warning);
}
.text-\[var\(--color-text-primary\)\] {
color: var(--color-text-primary);
}
.text-\[var\(--color-text-secondary\)\] {
color: var(--color-text-secondary);
}
.text-\[var\(--color-text-tertiary\)\] {
color: var(--color-text-tertiary);
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-brand-primary {
color: var(--color-brand-primary);
}
.text-brand-secondary {
color: var(--color-brand-secondary);
}
.text-error {
color: var(--color-error);
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500 {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-neutral-50 {
--tw-text-opacity: 1;
color: rgb(250 250 250 / var(--tw-text-opacity, 1));
}
.text-neutral-500 {
--tw-text-opacity: 1;
color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}
.text-neutral-900 {
--tw-text-opacity: 1;
color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.text-neutral-950 {
--tw-text-opacity: 1;
color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}
.text-orange-400 {
--tw-text-opacity: 1;
color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
--tw-text-opacity: 1;
color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-purple-400 {
--tw-text-opacity: 1;
color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-500 {
--tw-text-opacity: 1;
color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-success {
color: var(--color-success);
}
.text-text-primary {
color: var(--text-primary);
}
.text-text-secondary {
color: var(--text-secondary);
}
.text-text-tertiary {
color: var(--color-text-tertiary);
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-500 {
--tw-text-opacity: 1;
color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.underline {
text-decoration-line: underline;
}
.line-through {
text-decoration-line: line-through;
}
.underline-offset-4 {
text-underline-offset: 4px;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.placeholder-\[var\(--color-text-secondary\)\]::-moz-placeholder {
color: var(--color-text-secondary);
}
.placeholder-\[var\(--color-text-secondary\)\]::placeholder {
color: var(--color-text-secondary);
}
.placeholder-text-tertiary::-moz-placeholder {
color: var(--color-text-tertiary);
}
.placeholder-text-tertiary::placeholder {
color: var(--color-text-tertiary);
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.opacity-25 {
opacity: 0.25;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-75 {
opacity: 0.75;
}
.opacity-80 {
opacity: 0.8;
}
.opacity-90 {
opacity: 0.9;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: var(--shadow-lg);
--tw-shadow-colored: var(--shadow-lg);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: var(--shadow-md);
--tw-shadow-colored: var(--shadow-md);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: var(--shadow-sm);
--tw-shadow-colored: var(--shadow-sm);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: var(--shadow-xl);
--tw-shadow-colored: var(--shadow-xl);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline {
outline-style: solid;
}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
--tw-ring-inset: inset;
}
.ring-black {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}
.ring-gray-300 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.ring-opacity-5 {
--tw-ring-opacity: 0.05;
}
.ring-offset-white {
--tw-ring-offset-color: #fff;
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-100 {
transition-duration: 100ms;
}
.duration-150 {
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-500 {
transition-duration: 500ms;
}
.duration-700 {
transition-duration: 700ms;
}
.duration-75 {
transition-duration: 75ms;
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {
from {
opacity: var(--tw-enter-opacity, 1);
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
}
}
@keyframes exit {
to {
opacity: var(--tw-exit-opacity, 1);
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
}
}
.fade-in {
--tw-enter-opacity: 0;
}
.fade-out {
--tw-exit-opacity: 0;
}
.duration-100 {
animation-duration: 100ms;
}
.duration-150 {
animation-duration: 150ms;
}
.duration-200 {
animation-duration: 200ms;
}
.duration-300 {
animation-duration: 300ms;
}
.duration-500 {
animation-duration: 500ms;
}
.duration-700 {
animation-duration: 700ms;
}
.duration-75 {
animation-duration: 75ms;
}
.ease-in {
animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
animation-play-state: running;
}
.paused {
animation-play-state: paused;
}
/* --- Vue Toastification Overrides --- */
/* Sleeker container */
/* Bottom-right position styling */
/* Toast card styling */
/* Improve icon & message spacing */
/* Subtle progress bar */
/* Toast notification styling using design system colors */
/* Progress bar colors */
/* Hide scrollbar utility class */
/* Override Material Icons font-face to remove Google Fonts CDN */
/* The npm package already provides local woff2 files */
/* No additional @font-face needed since material-icons.css includes it */
.file\:border-0::file-selector-button {
border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
background-color: transparent;
}
.file\:text-sm::file-selector-button {
font-size: 0.875rem;
line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
font-weight: 500;
}
.file\:text-neutral-950::file-selector-button {
--tw-text-opacity: 1;
color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}
.placeholder\:text-neutral-500::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}
.placeholder\:text-neutral-500::placeholder {
--tw-text-opacity: 1;
color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}
.last\:border-b-0:last-child {
border-bottom-width: 0px;
}
.hover\:translate-y-\[-4px\]:hover {
--tw-translate-y: -4px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[var\(--color-border-secondary\)\]:hover {
border-color: var(--color-border-secondary);
}
.hover\:border-\[var\(--color-brand-primary\)\]:hover {
border-color: var(--color-brand-primary);
}
.hover\:border-border-strong:hover {
border-color: var(--color-border-strong);
}
.hover\:border-brand-primary:hover {
border-color: var(--color-brand-primary);
}
.hover\:border-brand-secondary:hover {
border-color: var(--color-brand-secondary);
}
.hover\:border-gray-400:hover {
--tw-border-opacity: 1;
border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.hover\:border-green-300:hover {
--tw-border-opacity: 1;
border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[var\(--color-bg-hover\)\]:hover {
background-color: var(--color-bg-hover);
}
.hover\:bg-\[var\(--color-bg-quaternary\)\]:hover {
background-color: var(--color-bg-quaternary);
}
.hover\:bg-\[var\(--color-bg-tertiary\)\]:hover {
background-color: var(--color-bg-tertiary);
}
.hover\:bg-\[var\(--color-status-error-bg\)\]:hover {
background-color: var(--color-status-error-bg);
}
.hover\:bg-ai-bg:hover {
background-color: var(--ai-bg);
}
.hover\:bg-bg-hover:hover {
background-color: var(--color-bg-hover);
}
.hover\:bg-bg-primary:hover {
background-color: var(--color-bg-primary);
}
.hover\:bg-bg-secondary:hover {
background-color: var(--color-bg-secondary);
}
.hover\:bg-bg-tertiary:hover {
background-color: var(--color-bg-tertiary);
}
.hover\:bg-brand-primary:hover {
background-color: var(--color-brand-primary);
}
.hover\:bg-error-bg:hover {
background-color: var(--color-error-bg);
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-neutral-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-neutral-100\/80:hover {
background-color: rgb(245 245 245 / 0.8);
}
.hover\:bg-red-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500\/90:hover {
background-color: rgb(239 68 68 / 0.9);
}
.hover\:bg-red-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/90:hover {
background-color: rgb(255 255 255 / 0.9);
}
.hover\:bg-opacity-10:hover {
--tw-bg-opacity: 0.1;
}
.hover\:bg-opacity-90:hover {
--tw-bg-opacity: 0.9;
}
.hover\:text-\[var\(--color-status-error\)\]:hover {
color: var(--color-status-error);
}
.hover\:text-\[var\(--color-text-primary\)\]:hover {
color: var(--color-text-primary);
}
.hover\:text-brand-primary:hover {
color: var(--color-brand-primary);
}
.hover\:text-brand-secondary:hover {
color: var(--color-brand-secondary);
}
.hover\:text-neutral-900:hover {
--tw-text-opacity: 1;
color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.hover\:text-red-500:hover {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:text-text-primary:hover {
color: var(--text-primary);
}
.hover\:text-text-secondary:hover {
color: var(--text-secondary);
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.hover\:opacity-80:hover {
opacity: 0.8;
}
.hover\:opacity-90:hover {
opacity: 0.9;
}
.hover\:shadow:hover {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover {
--tw-shadow: var(--shadow-lg);
--tw-shadow-colored: var(--shadow-lg);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
--tw-shadow: var(--shadow-md);
--tw-shadow-colored: var(--shadow-md);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-xl:hover {
--tw-shadow: var(--shadow-xl);
--tw-shadow-colored: var(--shadow-xl);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-black\/20:hover {
--tw-shadow-color: rgb(0 0 0 / 0.2);
--tw-shadow: var(--tw-shadow-colored);
}
.focus\:border-brand-primary:focus {
border-color: var(--color-brand-primary);
}
.focus\:border-transparent:focus {
border-color: transparent;
}
.focus\:bg-bg-hover:focus {
background-color: var(--color-bg-hover);
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-1:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-brand-primary:focus {
--tw-ring-color: var(--color-brand-primary);
}
.focus\:ring-neutral-950:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(10 10 10 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus-visible\:ring-1:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-neutral-950:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(10 10 10 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-red-600:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-offset-2:focus-visible {
--tw-ring-offset-width: 2px;
}
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed;
}
.disabled\:bg-border-primary:disabled {
background-color: var(--color-border-primary);
}
.disabled\:opacity-50:disabled {
opacity: 0.5;
}
.group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-\[var\(--color-brand-primary\)\] {
color: var(--color-brand-primary);
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
pointer-events: none;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
--tw-translate-y: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
--tw-translate-x: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:bg-bg-selected[data-state="checked"] {
background-color: var(--color-bg-selected);
}
.data-\[disabled\]\:opacity-50[data-disabled] {
opacity: 0.5;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
animation-name: enter;
animation-duration: 150ms;
--tw-enter-opacity: initial;
--tw-enter-scale: initial;
--tw-enter-rotate: initial;
--tw-enter-translate-x: initial;
--tw-enter-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
animation-name: exit;
animation-duration: 150ms;
--tw-exit-opacity: initial;
--tw-exit-scale: initial;
--tw-exit-rotate: initial;
--tw-exit-translate-x: initial;
--tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
--tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
--tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
--tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
--tw-enter-scale: .95;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
--tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
--tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
--tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
--tw-enter-translate-y: 0.5rem;
}
.dark\:border-gray-600:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.dark\:border-gray-700:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.dark\:border-neutral-800:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
}
.dark\:border-red-800:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}
.dark\:border-white\/10:is(.dark *) {
border-color: rgb(255 255 255 / 0.1);
}
.dark\:bg-\[\#1a1a1c\]:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(26 26 28 / var(--tw-bg-opacity, 1));
}
.dark\:bg-\[\#242427\]:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(36 36 39 / var(--tw-bg-opacity, 1));
}
.dark\:bg-\[\#2d2d30\]:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(45 45 48 / var(--tw-bg-opacity, 1));
}
.dark\:bg-\[\#363639\]:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(54 54 57 / var(--tw-bg-opacity, 1));
}
.dark\:bg-\[var\(--color-brand-primary-20\)\]:is(.dark *) {
background-color: var(--color-brand-primary-20);
}
.dark\:bg-black\/50:is(.dark *) {
background-color: rgb(0 0 0 / 0.5);
}
.dark\:bg-blue-900\/20:is(.dark *) {
background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-900\/30:is(.dark *) {
background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-gray-600:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-700:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-700\/50:is(.dark *) {
background-color: rgb(55 65 81 / 0.5);
}
.dark\:bg-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-900\/20:is(.dark *) {
background-color: rgb(20 83 45 / 0.2);
}
.dark\:bg-green-900\/30:is(.dark *) {
background-color: rgb(20 83 45 / 0.3);
}
.dark\:bg-neutral-800:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.dark\:bg-neutral-950:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-900:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-900\/20:is(.dark *) {
background-color: rgb(127 29 29 / 0.2);
}
.dark\:bg-white\/10:is(.dark *) {
background-color: rgb(255 255 255 / 0.1);
}
.dark\:text-blue-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-100:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-200:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-500:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-600:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.dark\:text-green-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.dark\:text-neutral-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.dark\:text-neutral-50:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(250 250 250 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-red-500:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.dark\:ring-gray-600:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity, 1));
}
.dark\:ring-white:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.dark\:ring-opacity-10:is(.dark *) {
--tw-ring-opacity: 0.1;
}
.dark\:ring-offset-neutral-950:is(.dark *) {
--tw-ring-offset-color: #0a0a0a;
}
.dark\:file\:text-neutral-50:is(.dark *)::file-selector-button {
--tw-text-opacity: 1;
color: rgb(250 250 250 / var(--tw-text-opacity, 1));
}
.dark\:placeholder\:text-neutral-400:is(.dark *)::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.dark\:placeholder\:text-neutral-400:is(.dark *)::placeholder {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.dark\:hover\:border-gray-500:hover:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-green-600:hover:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}
.dark\:hover\:bg-\[\#2d2d30\]:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(45 45 48 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-\[\#363639\]:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(54 54 57 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-600:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-700:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-800:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-gray-800\/90:hover:is(.dark *) {
background-color: rgb(31 41 55 / 0.9);
}
.dark\:hover\:bg-neutral-800:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-neutral-800\/80:hover:is(.dark *) {
background-color: rgb(38 38 38 / 0.8);
}
.dark\:hover\:bg-red-400\/15:hover:is(.dark *) {
background-color: rgb(248 113 113 / 0.15);
}
.dark\:hover\:bg-red-900\/20:hover:is(.dark *) {
background-color: rgb(127 29 29 / 0.2);
}
.dark\:hover\:bg-red-900\/90:hover:is(.dark *) {
background-color: rgb(127 29 29 / 0.9);
}
.dark\:hover\:text-neutral-50:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(250 250 250 / var(--tw-text-opacity, 1));
}
.dark\:focus\:ring-neutral-300:focus:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(212 212 212 / var(--tw-ring-opacity, 1));
}
.dark\:focus\:ring-offset-gray-800:focus:is(.dark *) {
--tw-ring-offset-color: #1f2937;
}
.dark\:focus-visible\:ring-neutral-300:focus-visible:is(.dark *) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(212 212 212 / var(--tw-ring-opacity, 1));
}
@media (min-width: 640px) {
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.md\:w-\[320px\] {
width: 320px;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.md\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lg\:p-6 {
padding: 1.5rem;
}
.lg\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media (min-width: 1280px) {
.xl\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xl\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.xl\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}/* Import drag handle styles */
/*
* Drag Handle Styles - Minimal Design
* No animations, gradients, or complex effects for optimal performance
*/
/* Base drag handle styles */
.drag-handle {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background: transparent;
cursor: grab;
transition: background-color 150ms ease;
color: var(--color-text-secondary, #9CA3AF);
/* Performance optimization for smoother transitions */
will-change: transform, opacity;
transform: translateZ(0);
backface-visibility: hidden;
}
.drag-handle:hover {
background: rgba(0, 0, 0, 0.05);
}
.drag-handle:active {
cursor: grabbing;
}
/* Dark mode adjustments */
[data-theme="dark"] .drag-handle {
color: var(--color-text-secondary, #6B7280);
}
[data-theme="dark"] .drag-handle:hover {
background: rgba(255, 255, 255, 0.08);
}
/* Dragging states */
.is-dragging {
opacity: 0.5;
pointer-events: none;
}
/* Dragged element clone/preview */
.drag-clone {
position: fixed;
z-index: 1000;
opacity: 0.5;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: var(--color-bg-primary, #FFFFFF);
}
[data-theme="dark"] .drag-clone {
background: var(--color-bg-primary, #1F2937);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Ghost placeholder where element was */
.drag-ghost {
opacity: 0.2;
background: var(--color-bg-secondary, #F3F4F6);
border: 1px dashed var(--color-border, #E5E7EB);
border-radius: 4px;
}
[data-theme="dark"] .drag-ghost {
background: var(--color-bg-secondary, #374151);
border-color: var(--color-border, #4B5563);
}
/* Drop indicator line */
.drag-drop-indicator {
position: absolute;
height: 2px;
background: #3B82F6;
pointer-events: none;
z-index: 999;
}
/* Optional: Hover state for drop zones */
.drag-over {
background: rgba(59, 130, 246, 0.05);
}
[data-theme="dark"] .drag-over {
background: rgba(59, 130, 246, 0.08);
}
/* Icon inside drag handle */
.drag-handle svg,
.drag-handle i {
width: 16px;
height: 16px;
opacity: 0.6;
color: var(--color-text-secondary);
}
.drag-handle:hover svg,
.drag-handle:hover i {
opacity: 0.8;
}
/* Ensure smooth transitions without performance impact */
* {
/* Remove any existing will-change or complex transitions */
will-change: auto;
}
/* Focus styles for accessibility */
.drag-handle:focus-visible {
outline: 2px solid #3B82F6;
outline-offset: 2px;
}
/* Draggable block hover state */
.draggable-block:hover .drag-handle {
opacity: 1;
}
.draggable-block:not(:hover) .drag-handle {
opacity: 0;
transition: opacity 150ms ease;
}
/* Import professional code block styles */
/* Professional Code Block Styles with Syntax Highlighting */
/* Note: Base container and language selector styles are now in CodeBlockLanguageSelector.vue component */
/* Fallback styles for non-Vue rendered code blocks (e.g., in chat messages) */
.ProseMirror pre.code-block-pro:not(.code-block-wrapper pre),
.tiptap-editor pre.code-block-pro:not(.code-block-wrapper pre) {
position: relative;
margin: 1.5rem 0;
padding: 1.25rem;
border-radius: 8px;
background: #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow-x: auto;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 0.9rem;
line-height: 1.6;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* ========================================
Syntax Highlighting - VS Code Dark+ Theme
======================================== */
/* Keywords */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
color: #569cd6;
font-weight: normal;
}
/* Strings */
.hljs-string,
.hljs-attr {
color: #ce9178;
}
/* Numbers */
.hljs-number,
.hljs-literal {
color: #b5cea8;
}
/* Comments */
.hljs-comment,
.hljs-quote {
color: #6a9955;
font-style: italic;
}
/* Functions */
.hljs-function,
.hljs-title,
.hljs-section {
color: #dcdcaa;
}
/* Variables */
.hljs-variable,
.hljs-template-variable,
.hljs-attr {
color: #9cdcfe;
}
/* Classes and types */
.hljs-class,
.hljs-type,
.hljs-built_in {
color: #4ec9b0;
}
/* Meta (decorators, annotations) */
.hljs-meta,
.hljs-meta-keyword {
color: #c586c0;
}
/* Operators */
.hljs-operator,
.hljs-punctuation {
color: #d4d4d4;
}
/* Attributes in HTML/XML */
.hljs-attribute {
color: #9cdcfe;
}
/* Tags in HTML/XML */
.hljs-tag {
color: #808080;
}
.hljs-name {
color: #569cd6;
}
/* Symbols */
.hljs-symbol,
.hljs-bullet {
color: #4fc1ff;
}
/* Regular expressions */
.hljs-regexp {
color: #d16969;
}
/* Emphasis */
.hljs-emphasis {
font-style: italic;
}
/* Strong */
.hljs-strong {
font-weight: bold;
}
/* Deletion */
.hljs-deletion {
background: rgba(255, 0, 0, 0.1);
color: #ff6b6b;
}
/* Addition */
.hljs-addition {
background: rgba(0, 255, 0, 0.1);
color: #51cf66;
}
/* Parameters */
.hljs-params {
color: #9cdcfe;
}
/* Special */
.hljs-special {
color: #dcdcaa;
}
/* ========================================
Light Mode Syntax Highlighting
======================================== */
[data-theme="light"] .hljs-keyword,
[data-theme="light"] .hljs-selector-tag,
[data-theme="light"] .hljs-literal,
[data-theme="light"] .hljs-section,
[data-theme="light"] .hljs-link {
color: #0000ff;
}
[data-theme="light"] .hljs-string,
[data-theme="light"] .hljs-attr {
color: #a31515;
}
[data-theme="light"] .hljs-number,
[data-theme="light"] .hljs-literal {
color: #098658;
}
[data-theme="light"] .hljs-comment,
[data-theme="light"] .hljs-quote {
color: #008000;
}
[data-theme="light"] .hljs-function,
[data-theme="light"] .hljs-title,
[data-theme="light"] .hljs-section {
color: #795e26;
}
[data-theme="light"] .hljs-variable,
[data-theme="light"] .hljs-template-variable {
color: #001080;
}
[data-theme="light"] .hljs-class,
[data-theme="light"] .hljs-type,
[data-theme="light"] .hljs-built_in {
color: #267f99;
}
[data-theme="light"] .hljs-meta,
[data-theme="light"] .hljs-meta-keyword {
color: #af00db;
}
[data-theme="light"] .hljs-tag {
color: #800000;
}
[data-theme="light"] .hljs-name {
color: #0000ff;
}
[data-theme="light"] .hljs-attribute {
color: #ff0000;
}
/* ========================================
NOTE: Scrollbar and responsive styles are now in CodeBlockLanguageSelector.vue
========================================== */
/* ========================================
Additional Python-specific styling
======================================== */
/* Python keywords get special treatment */
.language-python .hljs-keyword {
color: #ff79c6;
font-weight: 500;
}
/* Python decorators */
.language-python .hljs-meta {
color: #f1fa8c;
}
/* Python self/cls parameters */
.language-python .hljs-params .hljs-variable.language_ {
color: #ff79c6;
font-style: italic;
}
/* Force bubble menu (Tippy.js) to appear above all table controls */
.tippy-box {
z-index: 9999 !important;
}
/* Document Title Node Styles - Feishu-inspired */
.document-title-node {
margin-bottom: 1.5rem;
margin-top: 0.5rem;
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 700;
line-height: 1.2;
border: none !important;
outline: none !important;
position: relative;
}
/* Dark theme support for title */
[data-theme="dark"] .document-title-node {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
/* TipTap Placeholder for title node - using ::before pseudo-element like Feishu */
/* Show placeholder when title is empty */
.ProseMirror h1[data-type="title"]:empty::before,
.ProseMirror h1[data-type="title"].is-empty::before,
.ProseMirror h1[data-type="title"].is-editor-empty::before {
content: attr(data-placeholder);
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
pointer-events: none;
position: absolute;
left: 0;
font-weight: 700;
opacity: 0.6;
font-size: 2.25rem; /* Match text-4xl */
}
[data-theme="dark"] .ProseMirror h1[data-type="title"]:empty::before,
[data-theme="dark"] .ProseMirror h1[data-type="title"].is-empty::before,
[data-theme="dark"] .ProseMirror h1[data-type="title"].is-editor-empty::before {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
/* Ensure title is always first */
.ProseMirror > h1[data-type="title"]:first-child {
margin-bottom: 2rem;
}
/* General TipTap placeholder styles for paragraphs - Feishu style */
/* Only show placeholder for empty paragraphs with focus (showOnlyCurrent behavior) */
.ProseMirror p.is-editor-empty::before {
content: attr(data-placeholder);
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
pointer-events: none;
float: left;
height: 0;
opacity: 0.5;
}
[data-theme="dark"] .ProseMirror p.is-editor-empty::before {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
/* Essential ProseMirror / TipTap editor styles */
.tiptap-editor .ProseMirror {
min-height: 300px;
padding-top: 1rem;
padding-bottom: 1rem;
}
.tiptap-editor .ProseMirror:focus {
outline: 2px solid transparent;
outline-offset: 2px;
/* Prevent any unwanted border artifacts during focus */
border: none !important;
box-shadow: none !important;
}
/* Custom selection color - brand color */
.ProseMirror ::-moz-selection {
background: var(--color-brand-primary-30);
color: inherit;
}
.ProseMirror ::selection {
background: var(--color-brand-primary-30);
color: inherit;
}
.ProseMirror *::-moz-selection {
background: var(--color-brand-primary-30);
color: inherit;
}
.ProseMirror *::selection {
background: var(--color-brand-primary-30);
color: inherit;
}
/* For dark theme - slightly more transparent */
[data-theme="dark"] .ProseMirror ::-moz-selection, [data-theme="dark"] .ProseMirror *::-moz-selection {
background: var(--color-brand-primary-20);
color: inherit;
}
[data-theme="dark"] .ProseMirror ::selection,
[data-theme="dark"] .ProseMirror *::selection {
background: var(--color-brand-primary-20);
color: inherit;
}
/* Comprehensive fix for white border artifacts */
.tiptap-editor,
.tiptap-editor *,
.document-editor,
.document-editor *,
.ProseMirror,
.ProseMirror *:not(.image-resizer .resize-handle) {
/* Prevent any unexpected white borders */
border-color: transparent !important;
}
/* Specifically target common elements that might show white borders */
.tiptap-editor .ProseMirror div,
.tiptap-editor .ProseMirror span,
.tiptap-editor .ProseMirror p,
.document-editor .ProseMirror div,
.document-editor .ProseMirror span,
.document-editor .ProseMirror p {
border: none !important;
outline: none !important;
}
/* Prevent white borders during all transition states */
/* These rules apply to containers, not individual elements, so they won't conflict with block highlights */
.tiptap-editor .ProseMirror[style*="transition"],
.document-editor .ProseMirror[style*="transition"],
.content-animating .tiptap-editor,
.content-animating .document-editor,
.content-animating .ProseMirror {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Override any focus-related borders that might appear as white */
/* These rules apply to containers, not individual elements, so they won't conflict with block highlights */
.tiptap-editor:focus-within,
.document-editor:focus-within,
.ProseMirror:focus-within {
border: none !important;
outline: none !important;
}
/* Remove automatic numbering from ordered lists in editor */
.tiptap-editor .ProseMirror ol:not([data-indent]),
.ProseMirror ol:not([data-indent]),
.tiptap ol:not([data-indent]),
.tiptap-editor .ProseMirror ul:not([data-indent]),
.ProseMirror ul:not([data-indent]),
.tiptap ul:not([data-indent]) {
list-style: decimal !important; /* show numbers for ol */
counter-reset: initial !important; /* use native counter */
margin-left: 1.5rem;
}
.tiptap-editor .ProseMirror ul:not([data-indent]),
.ProseMirror ul:not([data-indent]),
.tiptap ul:not([data-indent]) {
list-style: disc !important; /* bullets for ul */
}
.tiptap-editor .ProseMirror ol li::before,
.ProseMirror ol li::before,
.tiptap ol li::before {
display: list-item !important; /* allow browser default marker */
content: none !important; /* rely on native numbering */
}
/* List item indentation - use text-indent to keep bullet in place */
.ProseMirror li[data-indent],
.tiptap li[data-indent] {
text-indent: 0;
padding-left: 0;
}
/* Material icons sizing */
.material-icons {
font-size: 1.5rem;
line-height: 2rem;
}
.material-icons-small {
font-size: 1.125rem !important;
line-height: 1.75rem !important;
line-height: 1 !important;
}
/* AI Edit Highlights - requires custom CSS */
.ai-edit-highlight {
position: relative;
border-radius: 0.375rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
padding-left: 0.125rem;
padding-right: 0.125rem;
background-color: rgba(52, 152, 219, 0.1);
border: 1px solid rgba(52, 152, 219, 0.3);
box-shadow: 0 0 2px rgba(52, 152, 219, 0.1);
/* Prevent white border artifacts during transitions */
transition: all 0.2s ease-out;
will-change: background-color, border-color;
}
/* Show a small indicator for highlighted text */
.ai-edit-highlight::after {
content: "";
position: absolute;
height: 0.5rem;
width: 0.5rem;
border-radius: 9999px;
top: -4px;
right: -4px;
background-color: #3498db;
box-shadow: 0 0 0 1px var(--color-border-subtle);
/* Prevent border issues on the indicator */
border: none !important;
}
.prose {
color: var(--text-primary);
}
/* Light mode prose styles */
[data-theme="light"] .prose {
color: var(--color-text-primary);
}
.prose p {
margin-bottom: 1rem;
}
.prose h1 {
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
}
.prose h2 {
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
}
.prose h3 {
margin-top: 1rem;
margin-bottom: 0.5rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
}
.prose ul, .prose ol {
margin-top: 1rem;
margin-bottom: 1rem;
margin-left: 1.5rem;
}
.prose li {
margin-bottom: 0.25rem;
}
.prose ul > li {
list-style-type: disc;
}
.prose ol > li {
list-style-type: decimal;
}
/* Add scrollbar hiding class */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Show scrollbar on hover */
.hover\:show-scrollbar:hover::-webkit-scrollbar {
display: block;
width: 6px;
height: 6px;
}
.hover\:show-scrollbar:hover {
scrollbar-width: thin;
}
.hover\:show-scrollbar:hover::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
.hover\:show-scrollbar:hover::-webkit-scrollbar-track {
background: transparent;
}
/* Scrollbar with fade transition */
.flex-1.overflow-y-auto::-webkit-scrollbar,
.flex-1 .overflow-y-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
width: 6px;
height: 6px;
opacity: 0.15;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
/* Base style for scrollbar thumb (initially faded out) */
.overflow-y-auto::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5); /* Base visible color */
border-radius: 3px;
opacity: 0; /* Initially hidden */
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out; /* Smooth fade transition */
}
/* Style for when the scrollbar should be visible */
.scrollbar-visible::-webkit-scrollbar-thumb,
.flex-1.overflow-y-auto:hover::-webkit-scrollbar-thumb,
.flex-1 .overflow-y-auto:hover::-webkit-scrollbar-thumb,
.overflow-y-auto:hover::-webkit-scrollbar-thumb /* Always show on hover */
{
opacity: 1; /* Fade in */
background-color: rgba(156, 163, 175, 0.5);
}
/* --- Firefox Specific Styling --- */
/* Base style for Firefox (track transparent, thumb semi-transparent but faded) */
.flex-1.overflow-y-auto,
.flex-1 .overflow-y-auto,
.overflow-y-auto {
/* Adjust the alpha channel for fade effect */
scrollbar-color: rgba(156, 163, 175, 0) var(--panel-bg, transparent); /* Thumb initially transparent */
scrollbar-width: thin;
/* Note: Transitioning scrollbar-color alpha might not be smooth in all FF versions */
transition: scrollbar-color 0.3s ease-out; /* Attempt transition */
}
/* Visible state for Firefox */
.scrollbar-visible,
.flex-1.overflow-y-auto:hover,
.flex-1 .overflow-y-auto:hover,
.overflow-y-auto:hover { /* Always show on hover */
/* Adjust alpha channel for visible thumb */
scrollbar-color: rgba(156, 163, 175, 0.5) var(--panel-bg, transparent); /* Visible thumb color */
}
/* WebKit (Chrome, Safari, Edge) Scrollbar Track Styling */
.flex-1.overflow-y-auto::-webkit-scrollbar-track,
.flex-1 .overflow-y-auto::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track {
background-color: var(--panel-bg);
border-radius: 3px;
}
/* --- Suggestion Feature Styles --- */
.suggestion-removed {
text-decoration: line-through;
text-decoration-thickness: 1px; /* Make strikethrough less thick */
background-color: rgba(255, 82, 82, 0.15); /* Slightly transparent red */
color: rgba(255, 150, 150, 0.9); /* Dimmed red text */
/* Display as inline block or similar if needed, but inline usually works */
padding: 0.5px 1px;
margin: -0.5px -1px; /* Offset padding to avoid layout shifts */
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(255, 82, 82, 0.2);
}
/* Style for added text (if we were visually showing it inline) */
/* Currently unused as we only mark removals */
.suggestion-added {
background-color: rgba(76, 175, 80, 0.15); /* Slightly transparent green */
color: rgba(160, 255, 160, 0.9);
padding: 0.5px 1px;
margin: -0.5px -1px;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.2);
}
/* Accept/Reject UI Container */
.suggestion-ui {
position: fixed; /* Use fixed positioning relative to viewport */
/* Consider using absolute positioning relative to the editor container if fixed causes issues */
/* position: absolute; */
z-index: 50; /* Ensure it's above editor content */
transform: translateY(6px); /* Small offset below the line */
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}
/* Fade out effect when hiding */
.suggestion-ui:not([style*="display: none"]) {
opacity: 1;
}
.suggestion-ui[style*="display: none"],
.suggestion-ui:not([v-if]) { /* Simplified check - relies on v-if */
opacity: 0;
transform: translateY(2px);
pointer-events: none;
}
/* Chat message styling */
.ai-response {
position: relative;
line-height: 1.5;
margin-top: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-right: 0.5rem;
}
/* Add subtle left border for AI responses */
.ai-response::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background-color: rgba(0, 113, 227, 0.4);
border-radius: 1px;
}
/* Loading AI response style */
.ai-response.is-loading {
opacity: 0.7;
}
/* Inline code styling (for chat messages and content) */
.inline-code {
background-color: rgba(30, 30, 30, 0.5);
border-radius: 3px;
padding: 0.15rem 0.3rem;
font-family: 'Roboto Mono', monospace;
font-size: 0.85rem;
color: #e0e0e0;
}
/* Note: Block-level code styling is now in code-block.css */
.chat-link {
color: #3b82f6;
text-decoration: none;
border-bottom: 1px dotted #3b82f6;
transition: color 0.2s, border-color 0.2s;
}
.chat-link:hover {
color: #60a5fa;
border-color: #60a5fa;
}
/* Show scrollbars only when needed/active */
.scrollbar-visible::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scrollbar-visible::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-visible::-webkit-scrollbar-thumb {
background-color: rgba(127, 127, 127, 0.5);
border-radius: 20px;
border: 2px solid transparent;
}
.scrollbar-visible::-webkit-scrollbar-thumb:hover {
background-color: rgba(127, 127, 127, 0.7);
}
/* Hide scrollbars by default */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 20px;
}
/* Professional AI Message Content Styling - using clean selectors */
.ai-message-content h1,
.ai-message-content h2,
.ai-message-content h3,
.ai-message-content h4,
.ai-message-content h5,
.ai-message-content h6 {
color: var(--color-text-primary);
font-weight: 600;
margin: 0.75rem 0 0.5rem 0;
line-height: 1.4;
}
.ai-message-content h1:first-child,
.ai-message-content h2:first-child,
.ai-message-content h3:first-child,
.ai-message-content h4:first-child,
.ai-message-content h5:first-child,
.ai-message-content h6:first-child {
margin-top: 0;
}
/* Clean heading hierarchy */
.ai-message-content h1 {
font-size: 1.1rem;
color: var(--color-text-primary);
margin: 1rem 0 0.5rem 0;
font-weight: 700;
}
.ai-message-content h2 {
font-size: 1rem;
color: var(--color-text-primary);
margin: 0.75rem 0 0.4rem 0;
font-weight: 600;
}
.ai-message-content h3 {
font-size: 0.9rem;
color: var(--color-text-primary);
margin: 0.6rem 0 0.3rem 0;
font-weight: 600;
}
.ai-message-content h4,
.ai-message-content h5,
.ai-message-content h6 {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin: 0.5rem 0 0.25rem 0;
font-weight: 600;
}
.ai-message-content p {
margin: 0.5rem 0;
line-height: 1.6;
color: var(--color-text-secondary);
font-size: 0.85rem;
max-width: 100%;
}
.ai-message-content p:first-child {
margin-top: 0;
}
.ai-message-content p:last-child {
margin-bottom: 0;
}
/* Clean spacing between sections */
.ai-message-content h1 + p,
.ai-message-content h2 + p,
.ai-message-content h3 + p,
.ai-message-content h4 + p,
.ai-message-content h5 + p,
.ai-message-content h6 + p {
margin-top: 0.4rem;
}
.ai-message-content p + h1,
.ai-message-content p + h2,
.ai-message-content p + h3,
.ai-message-content p + h4,
.ai-message-content p + h5,
.ai-message-content p + h6 {
margin-top: 1rem;
}
.ai-message-content ul,
.ai-message-content ol {
margin: 0.6rem 0;
padding-left: 1.5rem;
color: var(--color-text-secondary);
font-size: 0.85rem;
}
.ai-message-content li {
margin: 0.3rem 0;
line-height: 1.5;
position: relative;
}
.ai-message-content ul {
list-style-type: none;
}
.ai-message-content ul li::before {
content: "•";
color: var(--color-text-tertiary);
font-weight: bold;
position: absolute;
left: -1rem;
top: 0;
font-size: 0.8rem;
}
.ai-message-content ol {
list-style-type: none;
/* Removed counter-reset since HTML already contains numbers */
}
.ai-message-content ol li {
/* Removed counter-increment since HTML already contains numbers */
}
/* Removed ::before pseudo-element since HTML already contains numbers */
/* Nested lists */
.ai-message-content ul ul,
.ai-message-content ul ol,
.ai-message-content ol ul,
.ai-message-content ol ol {
margin: 0.25rem 0;
padding-left: 1rem;
font-size: 0.8rem;
}
.ai-message-content blockquote {
margin: 1rem 0;
padding: 0.75rem 1rem;
background: rgba(0, 113, 227, 0.1);
border-left: 4px solid rgba(0, 113, 227, 0.5);
border-radius: 0 4px 4px 0;
color: var(--color-text-secondary);
font-style: italic;
}
.ai-message-content a {
color: #60a5fa;
text-decoration: none;
border-bottom: 1px dotted #60a5fa;
transition: all 0.2s ease;
}
.ai-message-content a:hover {
color: #93c5fd;
border-color: #93c5fd;
text-decoration: none;
}
.ai-message-content table {
width: 100%;
border-collapse: collapse;
background: transparent;
color: var(--color-text-secondary);
font-size: 0.8rem;
margin: 0.75rem 0;
overflow-x: auto;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.ai-message-content th {
padding: 6px 8px; /* Notion-style compact padding */
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.04);
font-weight: 600;
color: var(--color-text-primary);
font-size: 0.8rem;
line-height: 1.5;
}
.ai-message-content td {
padding: 6px 8px; /* Notion-style compact padding */
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
vertical-align: top;
font-size: 0.8rem;
line-height: 1.5;
color: var(--color-text-secondary);
}
.ai-message-content tr:hover td {
background: rgba(255, 255, 255, 0.06);
}
.ai-message-content tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.02);
}
.ai-message-content tr:nth-child(even):hover td {
background: rgba(255, 255, 255, 0.08);
}
.ai-message-content tbody tr:last-child td {
border-bottom: none;
}
.ai-message-content pre {
margin: 1rem 0;
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(20, 20, 20, 0.8);
color: #e0e0e0;
padding: 1rem;
overflow-x: auto;
font-family: 'Roboto Mono', 'Courier New', monospace;
font-size: 0.85rem;
line-height: 1.5;
}
/* Clean text emphasis */
.ai-message-content strong,
.ai-message-content b {
font-weight: 600;
color: var(--color-text-primary);
}
.ai-message-content em,
.ai-message-content i {
font-style: italic;
color: rgba(255, 255, 255, 0.85);
}
/* Clean inline code */
.ai-message-content code {
background: rgba(255, 255, 255, 0.1);
color: var(--color-text-secondary);
padding: 0.15rem 0.3rem;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 0.8rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.ai-message-content table {
font-size: 0.75rem;
}
.ai-message-content th,
.ai-message-content td {
padding: 5px 6px; /* More compact for mobile, Notion-style */
font-size: 0.75rem;
}
.ai-message-content ul,
.ai-message-content ol {
padding-left: 1.25rem;
font-size: 0.8rem;
}
.ai-message-content h1 {
font-size: 1rem;
}
.ai-message-content h2 {
font-size: 0.95rem;
}
.ai-message-content p {
font-size: 0.8rem;
}
}
/* Clean AI message container */
.ai-message-content {
font-size: 0.85rem;
line-height: 1.5;
}
/* Proper spacing for elements */
.ai-message-content > *:first-child {
margin-top: 0;
}
.ai-message-content > *:last-child {
margin-bottom: 0;
}
/* Heading collapse styles */
.tiptap-editor .ProseMirror .heading-collapsed,
.ProseMirror .heading-collapsed {
position: relative;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.tiptap-editor .ProseMirror .heading-collapsed::after,
.ProseMirror .heading-collapsed::after {
content: '...';
color: rgba(156, 163, 175, 0.8);
font-size: 0.9em;
margin-left: 8px;
font-weight: normal;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.tiptap-editor .ProseMirror .heading-collapsed:hover::after,
.ProseMirror .heading-collapsed:hover::after {
opacity: 1;
}
/* Collapsed content - ensure it's properly hidden */
.tiptap-editor .ProseMirror .content-collapsed,
.ProseMirror .content-collapsed {
display: none !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
visibility: hidden !important;
}
/* Ensure proper spacing and positioning for collapsed headings */
.tiptap-editor .ProseMirror h1[data-collapsed="true"],
.tiptap-editor .ProseMirror h2[data-collapsed="true"],
.tiptap-editor .ProseMirror h3[data-collapsed="true"],
.tiptap-editor .ProseMirror h4[data-collapsed="true"],
.tiptap-editor .ProseMirror h5[data-collapsed="true"],
.tiptap-editor .ProseMirror h6[data-collapsed="true"],
.ProseMirror h1[data-collapsed="true"],
.ProseMirror h2[data-collapsed="true"],
.ProseMirror h3[data-collapsed="true"],
.ProseMirror h4[data-collapsed="true"],
.ProseMirror h5[data-collapsed="true"],
.ProseMirror h6[data-collapsed="true"] {
margin-bottom: 1em;
cursor: pointer;
position: relative;
border-radius: 4px;
padding: 0.25em 0.5em;
margin-left: -0.5em;
margin-right: -0.5em;
transition: background-color 0.2s ease;
}
.tiptap-editor .ProseMirror h1[data-collapsed="true"]:hover,
.tiptap-editor .ProseMirror h2[data-collapsed="true"]:hover,
.tiptap-editor .ProseMirror h3[data-collapsed="true"]:hover,
.tiptap-editor .ProseMirror h4[data-collapsed="true"]:hover,
.tiptap-editor .ProseMirror h5[data-collapsed="true"]:hover,
.tiptap-editor .ProseMirror h6[data-collapsed="true"]:hover,
.ProseMirror h1[data-collapsed="true"]:hover,
.ProseMirror h2[data-collapsed="true"]:hover,
.ProseMirror h3[data-collapsed="true"]:hover,
.ProseMirror h4[data-collapsed="true"]:hover,
.ProseMirror h5[data-collapsed="true"]:hover,
.ProseMirror h6[data-collapsed="true"]:hover {
background-color: rgba(59, 130, 246, 0.05);
}
/* Smooth transitions for showing/hiding content */
.tiptap-editor .ProseMirror *,
.ProseMirror * {
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Ensure collapsed content remains hidden during transitions */
.tiptap-editor .ProseMirror .content-collapsed *,
.ProseMirror .content-collapsed * {
display: none !important;
visibility: hidden !important;
}
/* Light mode styles */
[data-theme="light"] .ai-message-content code {
background: var(--color-code-bg);
color: var(--color-text-primary);
}
[data-theme="light"] .ai-message-content pre {
background: var(--color-code-bg);
border: 1px solid var(--color-border-primary);
color: var(--color-text-primary);
}
[data-theme="light"] .ai-message-content blockquote {
background: var(--color-bg-hover);
border-left: 4px solid var(--color-brand-primary);
}
[data-theme="light"] .ai-message-content table {
border: 1px solid var(--color-border-primary);
}
[data-theme="light"] .ai-message-content th {
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border-primary);
}
[data-theme="light"] .ai-message-content td {
border-bottom: 1px solid var(--color-border-subtle);
}
[data-theme="light"] .ai-message-content tr:hover td {
background: var(--color-bg-hover);
}
[data-theme="light"] .ai-message-content tr:nth-child(even) td {
background: var(--color-bg-hover);
}
[data-theme="light"] .ai-message-content tr:nth-child(even):hover td {
background: var(--color-bg-active);
}
/* Horizontal Rule / Divider Styles */
.tiptap-editor hr,
.ProseMirror hr,
.editor-divider {
margin: 2rem 0;
border: none;
height: 22px;
background: transparent;
opacity: 1;
cursor: pointer;
position: relative;
transition: all 0.2s ease;
}
/* Visual line using pseudo-element */
.tiptap-editor hr::after,
.ProseMirror hr::after,
.editor-divider::after {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
transform: translateY(-50%);
background: linear-gradient(
90deg,
transparent,
var(--color-border-primary) 20%,
var(--color-border-primary) 80%,
transparent
);
opacity: 0.5;
transition: opacity 0.2s ease;
}
.tiptap-editor hr:hover::after,
.ProseMirror hr:hover::after,
.editor-divider:hover::after {
opacity: 0.8;
}
/* Dark theme horizontal rule */
[data-theme="dark"] .tiptap-editor hr::after,
[data-theme="dark"] .ProseMirror hr::after,
[data-theme="dark"] .editor-divider::after {
background: linear-gradient(
90deg,
transparent,
#6b7280 20%,
#6b7280 80%,
transparent
);
opacity: 1;
}
[data-theme="dark"] .tiptap-editor hr:hover::after,
[data-theme="dark"] .ProseMirror hr:hover::after,
[data-theme="dark"] .editor-divider:hover::after {
background: linear-gradient(
90deg,
transparent,
#9ca3af 20%,
#9ca3af 80%,
transparent
);
opacity: 1;
}
/* Selected state for horizontal rule */
.tiptap-editor hr.ProseMirror-selectednode,
.ProseMirror hr.ProseMirror-selectednode,
.editor-divider.ProseMirror-selectednode {
background: var(--color-brand-primary-5);
border-radius: 4px;
}
.tiptap-editor hr.ProseMirror-selectednode::after,
.ProseMirror hr.ProseMirror-selectednode::after,
.editor-divider.ProseMirror-selectednode::after {
opacity: 1;
height: 3px;
background: linear-gradient(
90deg,
transparent,
var(--color-brand-primary) 20%,
var(--color-brand-primary) 80%,
transparent
);
box-shadow: 0 0 0 2px var(--color-brand-primary-20);
}
/* Selected state in dark mode */
[data-theme="dark"] .tiptap-editor hr.ProseMirror-selectednode,
[data-theme="dark"] .ProseMirror hr.ProseMirror-selectednode,
[data-theme="dark"] .editor-divider.ProseMirror-selectednode {
background: var(--color-brand-secondary-8);
}
[data-theme="dark"] .tiptap-editor hr.ProseMirror-selectednode::after,
[data-theme="dark"] .ProseMirror hr.ProseMirror-selectednode::after,
[data-theme="dark"] .editor-divider.ProseMirror-selectednode::after {
opacity: 1;
height: 3px;
background: linear-gradient(
90deg,
transparent,
var(--color-brand-secondary) 20%,
var(--color-brand-secondary) 80%,
transparent
);
box-shadow: 0 0 0 2px var(--color-brand-secondary-30);
}
/* Mathematics extension styles */
.tiptap .tiptap-mathematics-render {
padding: 0 0.25rem;
border-radius: 0.25rem;
}
.tiptap .tiptap-mathematics-render--editable {
cursor: pointer;
transition: background 0.2s;
}
.tiptap .tiptap-mathematics-render--editable:hover {
background: rgba(156, 163, 175, 0.2);
}
.tiptap .tiptap-mathematics-render[data-type='inline-math'] {
display: inline-block;
}
.tiptap .tiptap-mathematics-render[data-type='block-math'] {
display: block;
margin: 1rem 0;
padding: 1rem;
text-align: center;
}
.tiptap .inline-math-error,
.tiptap .block-math-error {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
padding: 0.5rem;
border-radius: 0.25rem;
}
/* Light mode math styles */
[data-theme="light"] .tiptap .tiptap-mathematics-render--editable:hover {
background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .tiptap .inline-math-error,
[data-theme="light"] .tiptap .block-math-error {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
border-color: rgba(239, 68, 68, 0.3);
}
/* Math node selection styles - purple border */
.ProseMirror [data-type="inlineMath"],
.ProseMirror [data-type="blockMath"],
.tiptap-editor [data-type="inlineMath"],
.tiptap-editor [data-type="blockMath"] {
transition: box-shadow 0.2s ease, border-radius 0.2s ease;
}
/* Inline math styles */
.ProseMirror [data-type="inlineMath"],
.tiptap-editor [data-type="inlineMath"] {
display: inline-block;
padding: 2px 4px;
margin: 0 2px;
}
/* Block math styles */
.ProseMirror [data-type="blockMath"],
.tiptap-editor [data-type="blockMath"] {
display: block;
padding: 8px 12px;
margin: 12px 0;
text-align: center;
}
/* Table selected cells highlight styles */
/* ProseMirror's default selectedCell class */
.ProseMirror table td.selectedCell,
.ProseMirror table th.selectedCell,
.tiptap-editor table td.selectedCell,
.tiptap-editor table th.selectedCell {
background: rgba(59, 130, 246, 0.3) !important; /* Stronger blue background for visibility */
border: 2px solid rgba(59, 130, 246, 0.8) !important;
position: relative;
box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.5),
0 0 0 1px rgba(59, 130, 246, 0.4);
outline: none;
}
/* Remove highlight when cell is being edited (has cursor/caret) */
.ProseMirror table td.selectedCell:focus-within,
.ProseMirror table th.selectedCell:focus-within,
.tiptap-editor table td.selectedCell:focus-within,
.tiptap-editor table th.selectedCell:focus-within,
/* When cell contains a text cursor (ProseMirror-gapcursor or selection) */
.ProseMirror table td.selectedCell:has(.ProseMirror-gapcursor),
.ProseMirror table th.selectedCell:has(.ProseMirror-gapcursor),
.tiptap-editor table td.selectedCell:has(.ProseMirror-gapcursor),
.tiptap-editor table th.selectedCell:has(.ProseMirror-gapcursor) {
background: transparent !important;
border: 1px solid rgba(156, 163, 175, 0.3) !important;
box-shadow: none !important;
}
/* Table cell base styles with solid dark backgrounds */
.ProseMirror table td,
.ProseMirror table th {
transition: all 0.15s ease;
}
/* Dark theme table backgrounds - uniform deep dark color for ALL cells */
.ProseMirror table th,
.tiptap-editor table th,
.ProseMirror table td,
.tiptap-editor table td {
background: #1a1a1a !important; /* Same pure black background as charts */
color: rgba(255, 255, 255, 0.9);
}
/* Make headers slightly bolder */
.ProseMirror table th,
.tiptap-editor table th {
font-weight: 600;
}
/* Light theme table backgrounds - with distinct header color */
[data-theme="light"] .ProseMirror table th,
[data-theme="light"] .tiptap-editor table th {
background: rgba(229, 231, 235, 1) !important; /* Darker gray for headers */
color: rgba(31, 41, 55, 1) !important; /* Dark text for visibility */
font-weight: 600;
border: 1px solid rgba(0, 0, 0, 0.12) !important; /* Notion-style border for light mode */
}
[data-theme="light"] .ProseMirror table td,
[data-theme="light"] .tiptap-editor table td {
background: rgba(243, 244, 246, 1) !important; /* Lighter gray for data cells */
color: rgba(31, 41, 55, 1) !important; /* Dark text for visibility */
border: 1px solid rgba(0, 0, 0, 0.12) !important; /* Notion-style border for light mode */
}
/* Stronger border for first/last selected cells to show selection range */
.ProseMirror table td.selectedCell:first-child,
.ProseMirror table th.selectedCell:first-child,
.tiptap-editor table td.selectedCell:first-child,
.tiptap-editor table th.selectedCell:first-child {
border-left-width: 3px !important;
border-left-color: rgba(59, 130, 246, 0.8) !important;
}
.ProseMirror table td.selectedCell:last-child,
.ProseMirror table th.selectedCell:last-child,
.tiptap-editor table td.selectedCell:last-child,
.tiptap-editor table th.selectedCell:last-child {
border-right-width: 3px !important;
border-right-color: rgba(59, 130, 246, 0.8) !important;
}
/* Glow effect on selected cells for better visibility */
.ProseMirror table td.selectedCell::after,
.ProseMirror table th.selectedCell::after,
.tiptap-editor table td.selectedCell::after,
.tiptap-editor table th.selectedCell::after,
.ProseMirror table td:focus::after,
.ProseMirror table th:focus::after,
.tiptap-editor table td:focus::after,
.tiptap-editor table th:focus::after,
.ProseMirror table td:has(.ProseMirror-selectednode)::after,
.ProseMirror table th:has(.ProseMirror-selectednode)::after,
.tiptap-editor table td:has(.ProseMirror-selectednode)::after,
.tiptap-editor table th:has(.ProseMirror-selectednode)::after,
.ProseMirror .tableWrapper table td.ProseMirror-selectednode::after,
.ProseMirror .tableWrapper table th.ProseMirror-selectednode::after,
.tiptap-editor .tableWrapper table td.ProseMirror-selectednode::after,
.tiptap-editor .tableWrapper table th.ProseMirror-selectednode::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid rgba(59, 130, 246, 0.4);
pointer-events: none;
border-radius: 2px;
animation: cellPulse 2s ease-in-out infinite;
}
@keyframes cellPulse {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
/* Light mode selected cells - stronger for visibility */
[data-theme="light"] .ProseMirror table td.selectedCell,
[data-theme="light"] .ProseMirror table th.selectedCell,
[data-theme="light"] .tiptap-editor table td.selectedCell,
[data-theme="light"] .tiptap-editor table th.selectedCell,
[data-theme="light"] .ProseMirror table td:focus,
[data-theme="light"] .ProseMirror table th:focus,
[data-theme="light"] .tiptap-editor table td:focus,
[data-theme="light"] .tiptap-editor table th:focus,
[data-theme="light"] .ProseMirror table td:has(.ProseMirror-selectednode),
[data-theme="light"] .ProseMirror table th:has(.ProseMirror-selectednode),
[data-theme="light"] .tiptap-editor table td:has(.ProseMirror-selectednode),
[data-theme="light"] .tiptap-editor table th:has(.ProseMirror-selectednode),
[data-theme="light"] .ProseMirror .tableWrapper table td.ProseMirror-selectednode,
[data-theme="light"] .ProseMirror .tableWrapper table th.ProseMirror-selectednode,
[data-theme="light"] .tiptap-editor .tableWrapper table td.ProseMirror-selectednode,
[data-theme="light"] .tiptap-editor .tableWrapper table th.ProseMirror-selectednode {
background: rgba(59, 130, 246, 0.25) !important; /* Stronger blue for visibility */
border-color: rgba(59, 130, 246, 0.8) !important;
box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.6),
0 0 0 1px rgba(59, 130, 246, 0.5);
}
[data-theme="light"] .ProseMirror table td.selectedCell:first-child,
[data-theme="light"] .ProseMirror table th.selectedCell:first-child,
[data-theme="light"] .tiptap-editor table td.selectedCell:first-child,
[data-theme="light"] .tiptap-editor table th.selectedCell:first-child {
border-left-color: rgba(59, 130, 246, 0.9) !important;
}
[data-theme="light"] .ProseMirror table td.selectedCell:last-child,
[data-theme="light"] .ProseMirror table th.selectedCell:last-child,
[data-theme="light"] .tiptap-editor table td.selectedCell:last-child,
[data-theme="light"] .tiptap-editor table th.selectedCell:last-child {
border-right-color: rgba(59, 130, 246, 0.9) !important;
}
/* Basic table cell styles with Notion-style borders */
.ProseMirror table td,
.ProseMirror table th,
.tiptap-editor table td,
.tiptap-editor table th {
border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle white border for dark mode */
padding: 3px 8px; /* Notion-style minimal padding: 3px vertical (extremely compact), 8px horizontal */
min-width: 100px;
vertical-align: middle; /* Center content vertically like Notion */
position: relative;
transition: background-color 0.15s ease, border-color 0.15s ease;
line-height: 1.3; /* Very tight line height to match Notion's 34px cell height */
font-size: 14px; /* Notion uses 14px for table text */
height: 34px; /* Force Notion's exact cell height */
max-height: 34px;
/* Disable dragging for cells */
-webkit-user-drag: none;
user-drag: none;
cursor: default;
}
/* Remove extra spacing from paragraphs inside table cells */
.ProseMirror table td p,
.ProseMirror table th p,
.tiptap-editor table td p,
.tiptap-editor table th p {
margin: 0 !important;
padding: 0 !important;
line-height: inherit; /* Inherit the tight line height from parent cell */
}
/* Disable dragging for table rows */
.ProseMirror table tr,
.tiptap-editor table tr {
-webkit-user-drag: none;
user-drag: none;
height: 34px; /* Force row height to match Notion */
}
/* Table hover effects - stronger on dark backgrounds */
.ProseMirror table td:hover,
.ProseMirror table th:hover,
.tiptap-editor table td:hover,
.tiptap-editor table th:hover {
background: rgba(40, 40, 40, 1) !important; /* Subtle lighter shade on hover, pure gray without blue tint */
}
[data-theme="light"] .ProseMirror table td:hover,
[data-theme="light"] .ProseMirror table th:hover,
[data-theme="light"] .tiptap-editor table td:hover,
[data-theme="light"] .tiptap-editor table th:hover {
background: rgba(229, 231, 235, 1) !important; /* Light gray on hover */
}
/* Override hover when cell is selected */
.ProseMirror table td.selectedCell:hover,
.ProseMirror table th.selectedCell:hover,
.tiptap-editor table td.selectedCell:hover,
.tiptap-editor table th.selectedCell:hover,
.ProseMirror table td:focus:hover,
.ProseMirror table th:focus:hover,
.tiptap-editor table td:focus:hover,
.tiptap-editor table th:focus:hover,
.ProseMirror table td:has(.ProseMirror-selectednode):hover,
.ProseMirror table th:has(.ProseMirror-selectednode):hover,
.tiptap-editor table td:has(.ProseMirror-selectednode):hover,
.tiptap-editor table th:has(.ProseMirror-selectednode):hover,
.ProseMirror .tableWrapper table td.ProseMirror-selectednode:hover,
.ProseMirror .tableWrapper table th.ProseMirror-selectednode:hover,
.tiptap-editor .tableWrapper table td.ProseMirror-selectednode:hover,
.tiptap-editor .tableWrapper table th.ProseMirror-selectednode:hover {
background: rgba(59, 130, 246, 0.18) !important;
}
[data-theme="light"] .ProseMirror table td.selectedCell:hover,
[data-theme="light"] .ProseMirror table th.selectedCell:hover,
[data-theme="light"] .tiptap-editor table td.selectedCell:hover,
[data-theme="light"] .tiptap-editor table th.selectedCell:hover,
[data-theme="light"] .ProseMirror table td:focus:hover,
[data-theme="light"] .ProseMirror table th:focus:hover,
[data-theme="light"] .tiptap-editor table td:focus:hover,
[data-theme="light"] .tiptap-editor table th:focus:hover,
[data-theme="light"] .ProseMirror table td:has(.ProseMirror-selectednode):hover,
[data-theme="light"] .ProseMirror table th:has(.ProseMirror-selectednode):hover,
[data-theme="light"] .tiptap-editor table td:has(.ProseMirror-selectednode):hover,
[data-theme="light"] .tiptap-editor table th:has(.ProseMirror-selectednode):hover,
[data-theme="light"] .ProseMirror .tableWrapper table td.ProseMirror-selectednode:hover,
[data-theme="light"] .ProseMirror .tableWrapper table th.ProseMirror-selectednode:hover,
[data-theme="light"] .tiptap-editor .tableWrapper table td.ProseMirror-selectednode:hover,
[data-theme="light"] .tiptap-editor .tableWrapper table th.ProseMirror-selectednode:hover {
background: rgba(59, 130, 246, 0.22) !important;
}
/* General paragraph spacing in editor - minimal spacing */
.ProseMirror p,
.tiptap-editor .ProseMirror p {
margin: 0.1rem 0;
}
/* CRITICAL: Ensure text-align works for ALL paragraphs (not just in tables) */
/* Inline styles have specificity, but sometimes CSS resets override them */
.ProseMirror p[style*="text-align: left"],
.tiptap-editor p[style*="text-align: left"] {
text-align: left !important;
}
.ProseMirror p[style*="text-align: center"],
.tiptap-editor p[style*="text-align: center"] {
text-align: center !important;
}
.ProseMirror p[style*="text-align: right"],
.tiptap-editor p[style*="text-align: right"] {
text-align: right !important;
}
.ProseMirror p[style*="text-align: justify"],
.tiptap-editor p[style*="text-align: justify"] {
text-align: justify !important;
}
/* IMPORTANT: Ensure text-align styles work in table cells */
.ProseMirror table td p[style*="text-align"],
.ProseMirror table th p[style*="text-align"],
.tiptap-editor table td p[style*="text-align"],
.tiptap-editor table th p[style*="text-align"] {
width: 100%;
display: block;
}
/* CRITICAL FIX: Ensure bold/italic work correctly with text color */
/* TipTap structure: text */
/* The color span wraps the formatting tags, so we need to inherit color into children */
/* Make sure color from parent span is inherited by child formatting tags */
.ProseMirror span[style*="color"] strong,
.ProseMirror span[style*="color"] b,
.tiptap-editor span[style*="color"] strong,
.tiptap-editor span[style*="color"] b {
color: inherit !important;
font-weight: bold !important;
}
.ProseMirror span[style*="color"] em,
.ProseMirror span[style*="color"] i,
.tiptap-editor span[style*="color"] em,
.tiptap-editor span[style*="color"] i {
color: inherit !important;
font-style: italic !important;
}
.ProseMirror span[style*="color"] u,
.tiptap-editor span[style*="color"] u {
color: inherit !important;
text-decoration: underline !important;
}
.ProseMirror span[style*="color"] s,
.ProseMirror span[style*="color"] strike,
.tiptap-editor span[style*="color"] s,
.tiptap-editor span[style*="color"] strike {
color: inherit !important;
text-decoration: line-through !important;
}
/* Also handle the reverse case: text */
.ProseMirror strong span[style*="color"],
.ProseMirror b span[style*="color"],
.tiptap-editor strong span[style*="color"],
.tiptap-editor b span[style*="color"] {
font-weight: bold !important;
}
.ProseMirror em span[style*="color"],
.ProseMirror i span[style*="color"],
.tiptap-editor em span[style*="color"],
.tiptap-editor i span[style*="color"] {
font-style: italic !important;
}
.ProseMirror u span[style*="color"],
.tiptap-editor u span[style*="color"] {
text-decoration: underline !important;
}
.ProseMirror s span[style*="color"],
.ProseMirror strike span[style*="color"],
.tiptap-editor s span[style*="color"],
.tiptap-editor strike span[style*="color"] {
text-decoration: line-through !important;
}
/* Paragraphs adjacent to tables, charts, and mermaid blocks have no margin (except empty ones) */
.ProseMirror table + p:not(:empty),
.ProseMirror p + table,
.ProseMirror .echarts-block + p:not(:empty),
.ProseMirror p + .echarts-block,
.ProseMirror .mermaid-block + p:not(:empty),
.ProseMirror p + .mermaid-block,
.tiptap-editor table + p:not(:empty),
.tiptap-editor p + table,
.tiptap-editor .echarts-block + p:not(:empty),
.tiptap-editor p + .echarts-block,
.tiptap-editor .mermaid-block + p:not(:empty),
.tiptap-editor p + .mermaid-block {
margin: 0 !important;
}
/* CRITICAL FIX: Ensure empty paragraphs are always visible and clickable
Note: ProseMirror empty paragraphs contain
*/
.ProseMirror p:empty,
.ProseMirror p:has(> br.ProseMirror-trailingBreak:only-child),
.tiptap-editor .ProseMirror p:empty,
.tiptap-editor .ProseMirror p:has(> br.ProseMirror-trailingBreak:only-child) {
min-height: 1.5em;
line-height: 1.5em;
}
/* Ensure empty paragraphs after tables, charts, and mermaid blocks are visible */
.ProseMirror table + p:empty,
.ProseMirror table + p:has(> br.ProseMirror-trailingBreak:only-child),
.ProseMirror .echarts-block + p:empty,
.ProseMirror .echarts-block + p:has(> br.ProseMirror-trailingBreak:only-child),
.ProseMirror .mermaid-block + p:empty,
.ProseMirror .mermaid-block + p:has(> br.ProseMirror-trailingBreak:only-child),
.tiptap-editor table + p:empty,
.tiptap-editor table + p:has(> br.ProseMirror-trailingBreak:only-child),
.tiptap-editor .echarts-block + p:empty,
.tiptap-editor .echarts-block + p:has(> br.ProseMirror-trailingBreak:only-child),
.tiptap-editor .mermaid-block + p:empty,
.tiptap-editor .mermaid-block + p:has(> br.ProseMirror-trailingBreak:only-child) {
min-height: 1.5em;
line-height: 1.5em;
margin-top: 0.1rem !important;
}
/* First paragraph has no top margin */
.ProseMirror > p:first-child,
.tiptap-editor .ProseMirror > p:first-child {
margin-top: 0;
}
/* Last paragraph has no bottom margin */
.ProseMirror > p:last-child,
.tiptap-editor .ProseMirror > p:last-child {
margin-bottom: 0;
}
/* Resizable Image Styles */
.ProseMirror .image-container,
.tiptap-editor .image-container {
position: relative;
display: inline-block; /* inline-block以适应内容宽度 */
max-width: 100%;
margin: 16px 0;
padding: 0; /* 使用outline无需padding */
clear: both;
box-sizing: border-box;
}
.ProseMirror .image-container img,
.tiptap-editor .image-container img {
display: block;
max-width: 100%;
height: auto;
}
/* Image selection border - 使用:has()检测img子元素的选中状态 */
.ProseMirror .image-container:has(img.ProseMirror-selectednode),
.tiptap-editor .image-container:has(img.ProseMirror-selectednode),
.ProseMirror .image-container:has(.editor-image.ProseMirror-selectednode),
.tiptap-editor .image-container:has(.editor-image.ProseMirror-selectednode) {
outline: 3px solid var(--color-brand-secondary, var(--color-brand-primary));
outline-offset: 2px;
border-radius: 6px;
}
/* 移除img上的默认outline，避免双重边框 */
.ProseMirror .image-container img.ProseMirror-selectednode,
.tiptap-editor .image-container img.ProseMirror-selectednode,
.ProseMirror .image-container .editor-image.ProseMirror-selectednode,
.tiptap-editor .image-container .editor-image.ProseMirror-selectednode {
outline: none !important;
border-radius: 4px;
}
/* Resize handle styles */
.image-container .resize-handle {
opacity: 0;
transition: opacity 0.2s;
}
.image-container:hover .resize-handle,
.image-container.ProseMirror-selectednode .resize-handle {
opacity: 1;
}
/* ECharts block styles */
.ProseMirror .echarts-block,
.tiptap-editor .echarts-block {
display: block;
position: relative;
margin: 1rem 0;
width: 100%;
}
.ProseMirror .echarts-block .echarts-container,
.tiptap-editor .echarts-block .echarts-container {
display: block;
width: 100%;
height: 400px;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: white;
box-sizing: border-box;
overflow: hidden;
}
/* Ensure ECharts internal elements don't overflow */
.ProseMirror .echarts-block .echarts-container > div,
.tiptap-editor .echarts-block .echarts-container > div {
max-width: 100% !important;
overflow: hidden;
}
.ProseMirror .echarts-block .echarts-container canvas,
.tiptap-editor .echarts-block .echarts-container canvas {
max-width: 100% !important;
}
.ProseMirror .echarts-block.ProseMirror-selectednode .echarts-container,
.tiptap-editor .echarts-block.ProseMirror-selectednode .echarts-container {
/* Removed purple border on selection for cleaner look */
box-shadow: none;
border-color: inherit;
}
/* Dark mode support */
.dark .echarts-block .echarts-container {
background: #1f2937;
border-color: #374151;
}
/* Mermaid block styles */
.ProseMirror .mermaid-block,
.tiptap-editor .mermaid-block {
display: block;
position: relative;
margin: 1rem 6px 1rem 6px;
width: calc(100% - 50px);
max-width: calc(100% - 50px);
}
.ProseMirror .mermaid-block .mermaid-container,
.tiptap-editor .mermaid-block .mermaid-container {
display: block;
width: 100%;
min-height: 100px;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: white;
box-sizing: border-box;
overflow: hidden;
padding: 1rem;
}
/* Ensure Mermaid SVG scales properly */
.ProseMirror .mermaid-block .mermaid-container svg,
.tiptap-editor .mermaid-block .mermaid-container svg {
max-width: 100% !important;
height: auto !important;
display: block;
margin: 0 auto;
}
.ProseMirror .mermaid-block.ProseMirror-selectednode .mermaid-container,
.tiptap-editor .mermaid-block.ProseMirror-selectednode .mermaid-container {
box-shadow: 0 0 0 3px var(--color-brand-primary), 0 0 0 6px var(--color-brand-primary-10);
border-color: var(--color-brand-primary);
}
/* Dark mode support for Mermaid */
.dark .mermaid-block .mermaid-container {
background: #1f2937;
border-color: #374151;
}
/* OnBlurHighlight extension - Show selection when editor loses focus */
.ProseMirror .blur-highlight {
background: var(--color-brand-primary-25) !important;
box-shadow: 0 0 0 2px var(--color-brand-primary-40);
border-radius: 3px;
padding: 2px 4px;
margin: -2px -4px;
transition: all 0.2s ease;
}
[data-theme="light"] .ProseMirror .blur-highlight {
background: var(--color-brand-primary-20) !important;
box-shadow: 0 0 0 2px var(--color-brand-primary-50);
}
/* Indentation styles for lists and paragraphs */
[data-indent='1'] { padding-left: 2rem; }
[data-indent='2'] { padding-left: 4rem; }
[data-indent='3'] { padding-left: 6rem; }
[data-indent='4'] { padding-left: 8rem; }
[data-indent='5'] { padding-left: 10rem; }
[data-indent='6'] { padding-left: 12rem; }
[data-indent='7'] { padding-left: 14rem; }
/*!
* Copyright (c) HANDSONCODE sp. z o. o.
*
* HANDSONTABLE is a software distributed by HANDSONCODE sp. z o. o., a Polish corporation based in
* Gdynia, Poland, at Aleja Zwyciestwa 96-98, registered by the District Court in Gdansk under number
* 538651, EU tax ID number: PL5862294002, share capital: PLN 62,800.00.
*
* This software is protected by applicable copyright laws, including international treaties, and dual-
* licensed - depending on whether your use for commercial purposes, meaning intended for or
* resulting in commercial advantage or monetary compensation, or not.
*
* If your use is strictly personal or solely for evaluation purposes, meaning for the purposes of testing
* the suitability, performance, and usefulness of this software outside the production environment,
* you agree to be bound by the terms included in the "handsontable-non-commercial-license.pdf" file.
*
* Your use of this software for commercial purposes is subject to the terms included in an applicable
* license agreement.
*
* In any case, you must not make any such use of this software as to develop software which may be
* considered competitive with this software.
*
* UNLESS EXPRESSLY AGREED OTHERWISE, HANDSONCODE PROVIDES THIS SOFTWARE ON AN "AS IS"
* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, AND IN NO EVENT AND UNDER NO
* LEGAL THEORY, SHALL HANDSONCODE BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY DIRECT,
* INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
* USE OR INABILITY TO USE THIS SOFTWARE.
*
* Version: 16.1.1
* Release date: 23/09/2025 (built at 23/09/2025 14:17:09)
*/.ht-portal:not([class*=ht-theme]),.ht-root-wrapper:not([class*=ht-theme]){--ht-gap-size:4px;--ht-checkbox-size:16px;--ht-cell-horizontal-padding:8px;--ht-cell-vertical-padding:4px;--ht-font-size:14px;--ht-line-height:20px;--ht-letter-spacing:0;--ht-border-color:#222;--ht-foreground-color:#222;--ht-background-color:#fff;--ht-header-foreground-color:#222;--ht-header-background-color:#f7f7f9;--ht-header-row-foreground-color:#222;--ht-header-row-background-color:#f7f7f9;--ht-cell-horizontal-border-color:#222;--ht-cell-vertical-border-color:#222;--ht-header-active-border-color:#1a42e8;--ht-header-active-foreground-color:#fff;--ht-header-active-background-color:#1a42e8;--ht-header-row-active-foreground-color:#fff;--ht-header-row-active-background-color:#1a42e8;--ht-cell-selection-border-color:#1a42e8;--ht-scrollbar-track-color:#f7f7f9;--ht-scrollbar-thumb-color:#a3a3a3}.ht-root-wrapper{display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Arial,sans-serif;height:100%;position:relative}.htFocusCatcher{border:0;height:0;margin:0;opacity:0;padding:0;position:absolute;width:0;z-index:-1}.ht-grid{flex:1 1 auto;min-height:0}.handsontable{color:var(--ht-foreground-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Arial,sans-serif;font-size:var(--ht-font-size);font-weight:var(--ht-font-weight);letter-spacing:var(--ht-letter-spacing);line-height:var(--ht-line-height);position:relative;scrollbar-color:var(--ht-scrollbar-thumb-color) var(--ht-scrollbar-track-color);scrollbar-width:thin;touch-action:manipulation}.handsontable .wtHolder::-webkit-scrollbar{height:9px;width:9px}.handsontable .wtHolder::-webkit-scrollbar-track{background:var(--ht-scrollbar-track-color);border-radius:var(--ht-scrollbar-border-radius)}.handsontable .wtHolder::-webkit-scrollbar-thumb{background-color:var(--ht-scrollbar-thumb-color);border-radius:var(--ht-scrollbar-border-radius)}.handsontable .wtHolder::-webkit-scrollbar-corner{background:var(--ht-scrollbar-track-color);border-end-end-radius:var(--ht-scrollbar-border-radius)}.handsontable.ht-wrapper{border-radius:var(--ht-wrapper-border-radius,0)}.handsontable.ht-wrapper:not(.htFirstDatasetColumnNotRendered) td:first-of-type{border-inline-start-width:1px}.handsontable.ht-wrapper:before{border:var(--ht-wrapper-border-width) solid var(--ht-wrapper-border-color);border-radius:var(--ht-wrapper-border-radius,0);content:"";display:block;inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:999}.handsontable.htGhostTable table thead th{border-bottom-width:0}.handsontable.htGhostTable table tbody tr:first-of-type td:first-child,.handsontable.htGhostTable table tbody tr:first-of-type th:first-child{height:calc(var(--ht-cell-vertical-padding)*2 + var(--ht-line-height) + 1px)}.handsontable.htGhostTable table tbody tr td,.handsontable.htGhostTable table tbody tr th{border-top-width:0;height:calc(var(--ht-cell-vertical-padding)*2 + var(--ht-line-height) + 1px)}.handsontable.htGhostTable table.htGhostTableFirstRow tbody tr td,.handsontable.htGhostTable table.htGhostTableFirstRow tbody tr th{border-top-width:1px;height:calc(var(--ht-cell-vertical-padding)*2 + var(--ht-line-height) + 2px)}.handsontable.htHasScrollX:not(.htHorizontallyScrollableByWindow) .ht_master .wtHolder,.handsontable.htHasScrollY:not(.htVerticallyScrollableByWindow) .ht_master .wtHolder{border-radius:var(--ht-wrapper-border-radius,0)}.handsontable:not(.htHorizontallyScrollableByWindow) .ht_master .wtHolder,.handsontable:not(.htVerticallyScrollableByWindow) .ht_master .wtHolder{background-color:var(--ht-background-color)}.handsontable tr.ht__row_even th{background-color:var(--ht-row-header-even-background-color)}.handsontable tr.ht__row_even td{background-color:var(--ht-row-cell-even-background-color)}.handsontable tr.ht__row_odd th{background-color:var(--ht-row-header-odd-background-color)}.handsontable tr.ht__row_odd td{background-color:var(--ht-row-cell-odd-background-color)}.handsontable td,.handsontable th{border-bottom:1px solid var(--ht-cell-vertical-border-color);border-inline-end-color:var(--ht-cell-horizontal-border-color);border-inline-end-width:1px;border-inline-start-color:var(--ht-cell-horizontal-border-color);border-inline-start-width:0;border-left-style:solid;border-right-style:solid;border-top:0 solid var(--ht-cell-vertical-border-color);box-sizing:border-box;color:var(--ht-foreground-color);empty-cells:show;font-size:var(--ht-font-size);height:calc(var(--ht-cell-vertical-padding)*2 + var(--ht-line-height) + 1px);line-height:var(--ht-line-height);outline:none;outline-width:0;overflow:hidden;padding:var(--ht-cell-vertical-padding) var(--ht-cell-horizontal-padding);vertical-align:top;white-space:pre-wrap}.handsontable td.invisibleSelection,.handsontable th.invisibleSelection{outline:none}.handsontable td.invisibleSelection::-moz-selection, .handsontable th.invisibleSelection::-moz-selection{background:transparent}.handsontable td.invisibleSelection::selection,.handsontable th.invisibleSelection::selection{background:transparent}.handsontable th{background-color:var(--ht-header-background-color);color:var(--ht-header-foreground-color);font-weight:var(--ht-header-font-weight);overflow:visible;position:relative;text-align:center;white-space:nowrap}.handsontable th:last-child{border-bottom-width:1px;border-inline-end-color:var(--ht-border-color);border-inline-end-width:1px;border-inline-start-width:0}.handsontable th:last-child.ht__active_highlight{border-inline-end-color:var(--ht-header-active-border-color)}.handsontable th:first-child{border-inline-start-color:var(--ht-border-color)}.handsontable th:first-child.ht__active_highlight{border-inline-start-color:var(--ht-header-active-border-color)}.handsontable th:first-child,.handsontable th:nth-child(2){border-inline-start-width:1px}.handsontable th.current{box-shadow:inset 0 0 0 1px var(--ht-cell-selection-border-color)}.handsontable th.active{background-color:var(--ht-header-active-background-color);color:var(--ht-header-active-foreground-color)}.handsontable th.ht__highlight{background-color:var(--ht-header-highlighted-background-color);color:var(--ht-header-highlighted-foreground-color)}.handsontable th.ht__active_highlight{background-color:var(--ht-header-active-background-color);border-color:var(--ht-header-active-border-color);color:var(--ht-header-active-foreground-color)}.handsontable tbody tr.ht__row_even th.ht__highlight,.handsontable tbody tr.ht__row_odd th.ht__highlight{background-color:var(--ht-header-row-highlighted-background-color);color:var(--ht-header-row-highlighted-foreground-color)}.handsontable tbody tr.ht__row_even th.ht__active_highlight,.handsontable tbody tr.ht__row_odd th.ht__active_highlight{background-color:var(--ht-header-row-active-background-color);color:var(--ht-header-row-active-foreground-color)}.handsontable tbody tr:first-of-type td:first-child,.handsontable tbody tr:first-of-type th:first-child{height:calc(var(--ht-cell-vertical-padding)*2 + var(--ht-line-height) + 2px)}.handsontable tbody tr th{background-color:var(--ht-header-row-background-color);color:var(--ht-header-row-foreground-color);padding:0}.handsontable tbody tr th.ht__active_highlight{box-shadow:0 -1px 0 0 var(--ht-header-active-border-color)}.handsontable tbody tr th .relative{height:100%;padding:var(--ht-cell-vertical-padding) var(--ht-cell-horizontal-padding)}.handsontable tbody tr td:first-child{border-inline-start-color:var(--ht-border-color)}.handsontable tbody tr td:last-child{border-inline-end-color:var(--ht-border-color)}.handsontable thead tr th{padding:0}.handsontable thead tr th.ht__active_highlight{box-shadow:-1px 0 0 0 var(--ht-header-active-border-color)}.handsontable thead tr th .relative{padding:var(--ht-cell-vertical-padding) var(--ht-cell-horizontal-padding)}.handsontable thead tr th .relative .colHeader{max-width:calc(100% + 1px);overflow:hidden;text-overflow:ellipsis;vertical-align:top}.handsontable thead tr th .relative:has(.collapsibleIndicator,.changeType) .colHeader{max-width:calc(100% - var(--ht-icon-size) - var(--ht-gap-size))}.handsontable tr:first-child td,.handsontable tr:first-child th{border-top-color:var(--ht-border-color);border-top-width:1px}.handsontable tr:first-child td.ht__active_highlight,.handsontable tr:first-child th.ht__active_highlight{border-top-color:var(--ht-header-active-border-color)}.handsontable tr:last-child td,.handsontable tr:last-child th{border-bottom-color:var(--ht-border-color)}.handsontable tr:last-child td.ht__active_highlight,.handsontable tr:last-child th.ht__active_highlight{border-bottom-color:var(--ht-header-active-border-color)}.handsontable div[class^=ht_clone] thead .ht__highlight .relative:after{background-color:var(--ht-accent-color);bottom:-1px;content:"";display:block;height:var(--ht-header-highlighted-shadow-size);left:-1px;position:absolute;right:-1px}.handsontable div[class^=ht_clone] thead tr:only-of-type .ht__highlight .relative:after{bottom:0}.handsontable div[class^=ht_clone] tbody .ht__highlight .relative:after{background-color:var(--ht-accent-color);bottom:-1px;content:"";display:block;position:absolute;right:-1px;top:-1px;width:var(--ht-header-highlighted-shadow-size)}.handsontable div[class^=ht_clone] td:first-of-type{border-inline-start-width:1px}.handsontable thead tr:not(:last-child) th{overflow:hidden}.handsontable .hide{display:none}.handsontable .relative{box-sizing:border-box;position:relative}.handsontable .wtHider{width:0}.handsontable .wtSpreader{height:auto;position:relative;width:0}.handsontable .htAutoSize{left:-99000px;position:absolute;top:-99000px;visibility:hidden}.handsontable .htTextEllipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.handsontable div,.handsontable input,.handsontable table,.handsontable tbody,.handsontable textarea,.handsontable thead{box-sizing:content-box}.handsontable input,.handsontable textarea{min-height:auto}.handsontable .htCore{background-color:var(--ht-background-color);border-collapse:separate;border-spacing:0;border-width:0;cursor:default;margin:0;outline-width:0;table-layout:fixed;width:0}.handsontable col,.handsontable col.rowHeader{width:64px}.handsontable col.hidden{width:0!important}.handsontable span.colHeader,.handsontable span.rowHeader{display:inline-block;font-size:var(--ht-font-size);line-height:var(--ht-line-height)}.handsontable tr.hidden,.handsontable tr.hidden td,.handsontable tr.hidden th{display:none}.handsontable a{color:var(--ht-link-color)}.handsontable a:hover{color:var(--ht-link-hover-color)}.handsontable .ht_clone_top th:nth-child(2){border-inline-end-width:1px;border-inline-start-width:0}.handsontable.htRowHeaders thead tr th:nth-child(2){border-inline-start-width:1px}.handsontable .ht_master:not(.innerBorderInlineStart):not(.emptyColumns) tbody tr th,.handsontable .ht_master:not(.innerBorderInlineStart):not(.emptyColumns) thead tr th:first-child,.handsontable .ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable:not(.htGhostTable) tbody tr th,.handsontable .ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable:not(.ht_clone_top):not(.htGhostTable) thead tr th:first-child{border-inline-end-width:0;border-inline-start-width:1px}.handsontable .ht_master:not(.innerBorderTop):not(.innerBorderBottom) thead tr.lastChild th,.handsontable .ht_master:not(.innerBorderTop):not(.innerBorderBottom) thead tr:last-child th,.handsontable .ht_master:not(.innerBorderTop):not(.innerBorderBottom)~.handsontable thead tr.lastChild th,.handsontable .ht_master:not(.innerBorderTop):not(.innerBorderBottom)~.handsontable thead tr:last-child th{border-bottom-width:0}.handsontable .ht_master.innerBorderTop tbody tr:first-child td,.handsontable .ht_master.innerBorderTop tbody tr:first-child th,.handsontable .ht_master.innerBorderTop~.ht_clone_inline_start tbody tr:first-child td,.handsontable .ht_master.innerBorderTop~.ht_clone_inline_start tbody tr:first-child th{border-top-width:0}.handsontable .ht_clone_inline_start table.htCore>thead,.handsontable .ht_master table.htCore>tbody>tr>th,.handsontable .ht_master table.htCore>thead{visibility:hidden}.ht_clone_bottom,.ht_clone_bottom .wtHolder,.ht_clone_inline_start,.ht_clone_inline_start .wtHolder,.ht_clone_top,.ht_clone_top .wtHolder,.ht_master,.ht_master .wtHolder{overflow:hidden}.ht_master .wtHolder{overflow:auto}[dir=rtl].handsontable td[dir=ltr]{border-inline-end-width:0;border-inline-start-width:1px}[dir=rtl].handsontable tbody tr td[dir=ltr]:last-child{border-inline-start-color:var(--ht-border-color)}[dir=rtl].handsontable div[class^=ht_clone] tbody .ht__highlight .relative:after{left:-1px;right:auto}.htScrollbarSafariTest::-webkit-scrollbar{height:9px;width:9px}.handsontable.ht-wrapper:not(.htColumnHeaders) .ht_master .htCore tbody tr:first-child td:first-child{border-start-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper:not(.htColumnHeaders) .ht_master .htCore tbody tr:first-child td:last-child{border-start-end-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper:not(.htColumnHeaders) .ht_clone_top .htCore tbody tr:first-child td:first-child,.handsontable.ht-wrapper:not(.htColumnHeaders) .ht_clone_top_inline_start_corner .htCore tbody tr:first-child td:first-child{border-start-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper:not(.htColumnHeaders) .ht_clone_top .htCore tbody tr:first-child td:last-child{border-start-end-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper:not(.htColumnHeaders) .ht_clone_inline_start .htCore tbody tr:first-child td:first-child,.handsontable.ht-wrapper:not(.htColumnHeaders) .ht_clone_inline_start .htCore tbody tr:first-child th:first-child{border-start-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_master .htCore{border-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_master .htCore thead tr:first-child th:first-child{border-start-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_master .htCore thead tr:first-child th:last-child{border-start-end-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_master .htCore thead tr:last-child th:first-child{border-end-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_master .htCore thead tr:last-child th:last-child{border-end-end-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_master .htCore tbody tr:last-child td:first-child{border-end-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_master .htCore tbody tr:last-child td:last-child{border-end-end-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_clone_top .htCore,.handsontable.ht-wrapper .ht_clone_top_inline_start_corner .htCore,.handsontable.ht-wrapper .ht_clone_top_inline_start_corner .htCore thead tr:first-child th:first-child{border-start-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_clone_top .htCore{border-start-end-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_clone_top .htCore thead tr:first-child th:first-child{border-start-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_clone_top .htCore thead tr:first-child th:last-child{border-start-end-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_clone_inline_start .htCore{border-end-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_clone_inline_start .htCore,.handsontable.ht-wrapper .ht_clone_inline_start .htCore thead tr:first-child th:first-child{border-start-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_clone_bottom .htCore,.handsontable.ht-wrapper .ht_clone_bottom_inline_start_corner .htCore,.handsontable.ht-wrapper .ht_clone_bottom_inline_start_corner .htCore tr:last-child td:first-child,.handsontable.ht-wrapper .ht_clone_bottom_inline_start_corner .htCore tr:last-child th:first-child,.handsontable.ht-wrapper .ht_clone_inline_start .htCore tbody tr:last-child td:first-child,.handsontable.ht-wrapper .ht_clone_inline_start .htCore tbody tr:last-child th:first-child{border-end-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_clone_bottom .htCore{border-end-end-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_clone_bottom .htCore tr:last-child td:first-child,.handsontable.ht-wrapper .ht_clone_bottom .htCore tr:last-child th:first-child{border-end-start-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper .ht_clone_bottom .htCore tr:last-child td:last-child,.handsontable.ht-wrapper .ht_clone_bottom .htCore tr:last-child th:last-child{border-end-end-radius:var(--ht-wrapper-border-radius)}.handsontable.ht-wrapper.htHasScrollX .htCore{border-end-end-radius:0;border-end-start-radius:0}.handsontable.ht-wrapper.htHasScrollX .htCore tbody tr:last-child td:first-child,.handsontable.ht-wrapper.htHasScrollX .htCore tbody tr:last-child th:first-child,.handsontable.ht-wrapper.htHasScrollX .htCore thead tr:last-child th:first-child{border-end-start-radius:0!important}.handsontable.ht-wrapper.htHasScrollX .htCore tbody tr:last-child td:last-child,.handsontable.ht-wrapper.htHasScrollX .htCore tbody tr:last-child th:last-child,.handsontable.ht-wrapper.htHasScrollX .htCore thead tr:last-child th:last-child{border-end-end-radius:0!important}.handsontable.ht-wrapper.htHasScrollY:not(.htVerticallyScrollableByWindow) .htCore{border-end-end-radius:0;border-start-end-radius:0}.handsontable.ht-wrapper.htHasScrollY:not(.htVerticallyScrollableByWindow) .htCore tbody tr:first-child td:last-child,.handsontable.ht-wrapper.htHasScrollY:not(.htVerticallyScrollableByWindow) .htCore tbody tr:first-child th:last-child,.handsontable.ht-wrapper.htHasScrollY:not(.htVerticallyScrollableByWindow) .htCore thead tr:first-child th:last-child{border-start-end-radius:0!important}.handsontable.ht-wrapper.htHasScrollY:not(.htVerticallyScrollableByWindow) .htCore tbody tr:last-child td:last-child,.handsontable.ht-wrapper.htHasScrollY:not(.htVerticallyScrollableByWindow) .htCore tbody tr:last-child th:last-child,.handsontable.ht-wrapper.htHasScrollY:not(.htVerticallyScrollableByWindow) .htCore thead tr:last-child th:last-child{border-end-end-radius:0!important}.handsontable.mobile,.handsontable.mobile .wtHolder{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scrolling:touch}.handsontable.mobile .handsontableInput:focus{-webkit-appearance:none;box-shadow:inset 0 0 0 2px var(--ht-accent-color)}.handsontable .bottomSelectionHandle,.handsontable .bottomSelectionHandle-HitArea,.handsontable .topSelectionHandle,.handsontable .topSelectionHandle-HitArea{inset-inline-end:unset;inset-inline-start:-10000px;top:-10000px;z-index:9999}.handsontable.hide-tween{animation:opacity-hide .2s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.handsontable.show-tween{animation:opacity-show .3s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.ht_clone_master{z-index:100}.ht_clone_inline_start{z-index:120}.ht_clone_bottom{z-index:130}.ht_clone_bottom_inline_start_corner{z-index:150}.ht_clone_top{z-index:160}.ht_clone_top_inline_start_corner{z-index:180}.ht_editor_hidden{z-index:-1}.ht_editor_visible{z-index:200}.handsontable td.area{position:relative}.handsontable td.area:before{background:var(--ht-cell-selection-background-color,#1a42e8);content:"";inset:0;position:absolute}.handsontable td.area-1{position:relative}.handsontable td.area-1:before{background:var(--ht-cell-selection-background-color,#1a42e8);content:"";inset:0;position:absolute}.handsontable td.area-2{position:relative}.handsontable td.area-2:before{background:var(--ht-cell-selection-background-color,#1a42e8);content:"";inset:0;position:absolute}.handsontable td.area-3{position:relative}.handsontable td.area-3:before{background:var(--ht-cell-selection-background-color,#1a42e8);content:"";inset:0;position:absolute}.handsontable td.area-4{position:relative}.handsontable td.area-4:before{background:var(--ht-cell-selection-background-color,#1a42e8);content:"";inset:0;position:absolute}.handsontable td.area-5{position:relative}.handsontable td.area-5:before{background:var(--ht-cell-selection-background-color,#1a42e8);content:"";inset:0;position:absolute}.handsontable td.area-6{position:relative}.handsontable td.area-6:before{background:var(--ht-cell-selection-background-color,#1a42e8);content:"";inset:0;position:absolute}.handsontable td.area-7{position:relative}.handsontable td.area-7:before{background:var(--ht-cell-selection-background-color,#1a42e8);content:"";inset:0;position:absolute}.handsontable td.area:before{opacity:.14}.handsontable td.area-1:before{opacity:.21}.handsontable td.area-2:before{opacity:.28}.handsontable td.area-3:before{opacity:.35}.handsontable td.area-4:before{opacity:.42}.handsontable td.area-5:before{opacity:.49}.handsontable td.area-6:before{opacity:.56}.handsontable td.area-7:before{opacity:.63}.handsontable td.area{border-color:color-mix(in srgb,var(--ht-border-color),var(--ht-foreground-color) 10%)}.handsontable .wtBorder{font-size:0;position:absolute}.handsontable .wtBorder:first-child,.handsontable .wtBorder:nth-child(3){z-index:2}.handsontable .wtBorder:nth-child(2),.handsontable .wtBorder:nth-child(4){z-index:1}.handsontable .wtBorder.hidden{display:none!important}.handsontable .wtBorder.current{z-index:10}.handsontable .wtBorder.area,.handsontable .wtBorder.current{background-color:var(--ht-cell-selection-border-color)!important}.handsontable .wtBorder.area{z-index:8}.handsontable .wtBorder.fill{background-color:var(--ht-cell-autofill-fill-border-color,#68696c)!important;z-index:6}.handsontable .wtBorder.corner{background-color:var(--ht-cell-autofill-background-color,#1a42e8)!important;border-color:var(--ht-cell-autofill-border-color)!important;border-radius:var(--ht-cell-autofill-border-radius)!important;cursor:crosshair;font-size:0;z-index:10}.hot-display-license-info{background-color:var(--ht-license-background-color,#f7f7f9);border:1px solid var(--ht-border-color,#f7f7f9);border-radius:var(--ht-wrapper-border-radius);color:var(--ht-license-foreground-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Arial,sans-serif;font-size:var(--ht-font-size-small);line-height:var(--ht-line-height-small);margin-top:10px;padding:var(--ht-license-vertical-padding,16px) var(--ht-license-horizontal-padding,16px);text-align:left}.hot-display-license-info a{color:var(--ht-link-color);font-size:var(--ht-license-font-size)}.hot-display-license-info a:hover{color:var(--ht-link-hover-color)}.handsontable .htAutocompleteArrow{cursor:default;float:right;font-size:0;height:var(--ht-icon-size);margin-inline-end:1px;margin-inline-start:calc(var(--ht-gap-size)*2);position:relative;top:calc((var(--ht-line-height) - var(--ht-icon-size))/2);width:var(--ht-icon-size)}.handsontable .htAutocompleteArrow:after{content:"";display:block;left:0;opacity:.6;position:absolute;top:0}[dir=rtl].handsontable .htAutocompleteArrow{float:left}.handsontable .htCheckboxRendererInput{cursor:pointer;display:inline-block;height:var(--ht-checkbox-size);margin:-2px 0 0;outline:none;position:relative;vertical-align:middle;width:var(--ht-checkbox-size)}.handsontable .htCheckboxRendererInput:first-child{margin-inline-end:var(--ht-gap-size)}.handsontable .htCheckboxRendererInput:last-child{margin-inline-start:var(--ht-gap-size)}.handsontable .htCheckboxRendererInput:before{background-color:var(--ht-checkbox-background-color);border:1px solid var(--ht-checkbox-border-color);border-radius:var(--ht-checkbox-border-radius);box-sizing:border-box;content:"";display:inline-block;height:var(--ht-checkbox-size);left:0;pointer-events:none;position:absolute;top:0;transition:all var(--ht-table-transition) ease-in-out;width:var(--ht-checkbox-size)}.handsontable .htCheckboxRendererInput:after{color:var(--ht-checkbox-icon-color);content:"";display:block;height:var(--ht-checkbox-size)!important;left:0;pointer-events:none;position:absolute;top:0;width:var(--ht-checkbox-size)!important}.handsontable .htCheckboxRendererInput:checked:before{background-color:var(--ht-checkbox-checked-background-color);border-color:var(--ht-checkbox-checked-border-color)}.handsontable .htCheckboxRendererInput:checked:after{color:var(--ht-checkbox-checked-icon-color)}.handsontable .htCheckboxRendererInput:checked:disabled:before{background-color:var(--ht-checkbox-checked-disabled-background-color);border-color:var(--ht-checkbox-checked-disabled-border-color)}.handsontable .htCheckboxRendererInput:checked:disabled:after{color:var(--ht-checkbox-checked-disabled-icon-color)}.handsontable .htCheckboxRendererInput:checked:focus:before{background-color:var(--ht-checkbox-checked-focus-background-color);border-color:var(--ht-checkbox-checked-focus-border-color)}.handsontable .htCheckboxRendererInput:checked:focus:after{color:var(--ht-checkbox-checked-focus-icon-color)}.handsontable .htCheckboxRendererInput:focus:before{background-color:var(--ht-checkbox-focus-background-color);border-color:var(--ht-checkbox-focus-border-color);outline:1px solid var(--ht-checkbox-focus-ring-color)}.handsontable .htCheckboxRendererInput:focus:after{color:var(--ht-checkbox-focus-icon-color)}.handsontable .htCheckboxRendererInput:disabled{cursor:auto}.handsontable .htCheckboxRendererInput:disabled:before{background-color:var(--ht-checkbox-disabled-background-color);border-color:var(--ht-checkbox-disabled-border-color)}.handsontable .htCheckboxRendererInput:disabled:after{color:var(--ht-checkbox-disabled-icon-color)}.handsontable .htCheckboxRendererInput:indeterminate:before{background-color:var(--ht-checkbox-indeterminate-background-color);border-color:var(--ht-checkbox-indeterminate-border-color)}.handsontable .htCheckboxRendererInput:indeterminate:after{color:var(--ht-checkbox-indeterminate-icon-color)}.handsontable .htCheckboxRendererInput:indeterminate:disabled:before{background-color:var(--ht-checkbox-indeterminate-disabled-background-color);border-color:var(--ht-checkbox-indeterminate-disabled-border-color)}.handsontable .htCheckboxRendererInput:indeterminate:disabled:after{color:var(--ht-checkbox-indeterminate-disabled-icon-color)}.handsontable .htCheckboxRendererInput:indeterminate:focus:before{background-color:var(--ht-checkbox-indeterminate-focus-background-color);border-color:var(--ht-checkbox-indeterminate-focus-border-color)}.handsontable .htCheckboxRendererInput:indeterminate:focus:after{color:var(--ht-checkbox-indeterminate-focus-icon-color)}.handsontable .htCheckboxRendererInput.noValue{opacity:.5}.handsontable .htCheckboxRendererLabel{color:inherit;cursor:pointer;display:inline-block;font-size:inherit;line-height:inherit;margin:0;position:relative}.handsontable .htCheckboxRendererLabel.fullWidth{width:100%}.handsontable .htPlaceholder{color:var(--ht-placeholder-color)}.handsontable .htDimmed{background-color:var(--ht-cell-read-only-background-color)!important;color:var(--ht-read-only-color)!important}.handsontable .htLeft{text-align:left}.handsontable .htCenter{text-align:center}.handsontable .htRight{text-align:right}.handsontable .htJustify{text-align:justify}.handsontable .htTop{vertical-align:top}.handsontable .htMiddle{vertical-align:middle}.handsontable .htBottom{vertical-align:bottom}.handsontable .htInvalid{background-color:var(--ht-cell-error-background-color)!important}.handsontable .htNoWrap{white-space:nowrap}.handsontable .htSearchResult{background-color:var(--ht-cell-success-background-color)!important}.handsontableInputHolder{left:0;position:absolute;top:0}.handsontableInputHolder .handsontableInput{-webkit-appearance:none!important;background-color:var(--ht-cell-editor-background-color,#fff);border:none;border-radius:0;box-shadow:inset 0 0 0 var(--ht-cell-editor-border-width,2px) var(--ht-cell-editor-border-color,#1a42e8),0 0 var(--ht-cell-editor-shadow-blur-radius,0) 0 var(--ht-cell-editor-shadow-color,transparent);box-sizing:border-box;color:var(--ht-cell-editor-foreground-color);display:block;font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;margin:0;outline-width:0;padding:calc(var(--ht-cell-vertical-padding, 4px) + 1px) calc(var(--ht-cell-horizontal-padding, 8px) + 1px)}.handsontableInputHolder .handsontableInput:focus{outline:none}.htSelectEditor{position:absolute}.htSelectEditor select{-webkit-appearance:none!important;background-color:var(--ht-cell-editor-background-color,#fff);border:none;border-radius:0;box-shadow:inset 0 0 0 var(--ht-cell-editor-border-width,2px) var(--ht-cell-editor-border-color,#1a42e8),0 0 var(--ht-cell-editor-shadow-blur-radius,0) 0 var(--ht-cell-editor-shadow-color,transparent);box-sizing:border-box;color:var(--ht-cell-editor-foreground-color);font-family:inherit!important;font-size:inherit!important;height:100%;inset:0;line-height:inherit!important;margin:0;overflow:hidden;padding:calc(var(--ht-cell-vertical-padding, 4px) + 1px) calc(var(--ht-cell-horizontal-padding, 8px) + 1px);padding-inline-end:26px;position:absolute;text-overflow:ellipsis;white-space:nowrap;width:100%}.htSelectEditor select:focus{outline:none}.htSelectEditor .htAutocompleteArrow{margin-inline-end:4px;pointer-events:none;top:50%;transform:translateY(-50%);z-index:1}.handsontable.listbox{border:var(--ht-menu-border-width,1px) solid var(--ht-menu-border-color,#e5e5e9);box-shadow:var(--ht-menu-shadow-x,0) var(--ht-menu-shadow-y,0) var(--ht-menu-shadow-blur,8px) var(--ht-menu-shadow-color,rgba(0,0,0,.08));margin:0}.handsontable.listbox .ht_master{background-color:var(--ht-background-color);overflow:hidden}.handsontable.listbox .wtHolder{border-radius:0!important;overflow:auto}.handsontable.listbox .htCore,.handsontable.listbox .wtHider{border-radius:0!important}.handsontable.listbox table{overflow:hidden}.handsontable.listbox table td,.handsontable.listbox table th,.handsontable.listbox table tr:first-child td,.handsontable.listbox table tr:first-child th,.handsontable.listbox table tr:last-child th{border-color:transparent!important}.handsontable.listbox table td,.handsontable.listbox table th{border-radius:0!important;text-overflow:ellipsis;white-space:nowrap}.handsontable.listbox table .wtBorder{visibility:hidden}.handsontable.listbox table strong{color:inherit;font-weight:700}.handsontable.listbox table tr td:hover td{background:var(--ht-menu-item-hover-color,#e5e5e9)!important;box-shadow:none!important;cursor:pointer}.handsontable.listbox table td{transition:var(--ht-table-transition) background ease-in-out}.handsontable.listbox table td:hover{background-color:var(--ht-menu-item-hover-color,#e5e5e9)!important;cursor:pointer}.handsontable.listbox table td.current:not([aria-expanded=true]){box-shadow:inset 0 0 0 1px var(--ht-accent-color)}.handsontable.listbox table td.htDimmed{color:inherit!important;cursor:default;font-style:inherit}.handsontable.listbox table td.htDimmed:not(.handsontable.listbox table td:hover){background-color:inherit!important}.handsontable.listbox table thead th{border-width:0 1px 1px;height:auto!important;text-align:left}.handsontable.listbox table thead th>div{padding-bottom:8px;padding-top:8px}.handsontable.listbox table thead th:first-child{padding-left:8px}.handsontable.listbox .ht_clone_top .wtHider{overflow:hidden}.handsontable.listbox .ht_clone_top table{border-radius:0}.handsontable.listbox .htBorders div{background:none!important}.handsontable.autocompleteEditor tr.ht__row_even td,.handsontable.autocompleteEditor tr.ht__row_even th,.handsontable.autocompleteEditor tr.ht__row_odd td,.handsontable.autocompleteEditor tr.ht__row_odd th{background-color:var(--ht-background-color,#fff)}.pika-single{background:var(--ht-background-color,#fff);border:var(--ht-menu-border-width,1px) solid var(--ht-menu-border-color,#e5e5e9);border-radius:var(--ht-menu-border-radius);box-shadow:var(--ht-menu-shadow-x,0) var(--ht-menu-shadow-y,0) var(--ht-menu-shadow-blur,8px) var(--ht-menu-shadow-color,rgba(0,0,0,.08));color:var(--ht-foreground-color);display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Arial,sans-serif;font-size:var(--ht-font-size);font-weight:var(--ht-font-weight);line-height:var(--ht-line-height);padding:10px;position:relative;z-index:9999}.pika-single.is-hidden{display:none}.pika-single .pika-row{background-color:transparent}.pika-single .pika-title{align-items:center;display:flex;justify-content:center}.pika-single .pika-label{color:var(--ht-accent-color);order:2;padding:5px;position:relative}.pika-single .pika-label .pika-select{cursor:pointer;inset:0;opacity:0;position:absolute}.pika-single .pika-next,.pika-single .pika-prev{background:none;border:none;color:var(--ht-accent-color);cursor:pointer;height:20px;text-indent:-9999px;white-space:nowrap;width:20px}.pika-single .pika-prev{margin-right:auto;order:1}.pika-single .pika-next{margin-left:auto;order:3}.pika-single .pika-table thead{height:50px}.pika-single .pika-table th{padding:1px;vertical-align:middle}.pika-single .pika-table th abbr{border:none;cursor:auto;font-weight:400;text-decoration:none}.pika-single .pika-table td{padding:1px;vertical-align:middle}.pika-single .pika-table td.is-disabled .pika-button{opacity:.5;pointer-events:none}.pika-single .pika-table td.is-today .pika-button{background:var(--ht-menu-item-hover-color)}.pika-single .pika-table td.is-selected .pika-button{background:var(--ht-accent-color,#1a42e8);color:var(--ht-background-color,#fff)}.pika-single .pika-table td.pika-week{text-align:center;width:12.5%}.pika-single .pika-table .pika-button{aspect-ratio:1/1;background:transparent;border:none;border-radius:var(--ht-button-border-radius);color:var(--ht-foreground-color);cursor:pointer;font-size:inherit;margin:0;padding:10px;width:100%}.pika-single .pika-table .pika-button:hover{background:var(--ht-menu-item-hover-color)}[dir=rtl].htDatepickerHolder .pika-single .pika-next{margin-left:0;margin-right:auto;transform:rotate(180deg)}[dir=rtl].htDatepickerHolder .pika-single .pika-prev{margin-left:auto;margin-right:0;transform:rotate(180deg)}.handsontable .htUISelectCaption{background-color:var(--ht-input-background-color);border:var(--ht-input-border-width) solid var(--ht-input-border-color);border-radius:var(--ht-input-border-radius);box-sizing:border-box;color:var(--ht-input-foreground-color);cursor:pointer;font-family:inherit;font-size:var(--ht-font-size);font-weight:var(--ht-font-weight);line-height:var(--ht-line-height);margin:0;outline:none!important;overflow:hidden;padding:var(--ht-input-vertical-padding) var(--ht-input-horizontal-padding);padding-inline-end:calc(var(--ht-input-horizontal-padding) + var(--ht-icon-size));text-overflow:ellipsis;transition:var(--ht-table-transition) all ease-in-out;white-space:nowrap;width:100%}.handsontable .htUISelectCaption:after{content:"";display:block;position:absolute;right:calc(var(--ht-input-horizontal-padding) - var(--ht-icon-size)/4);top:50%;transform:translateY(-50%)}.handsontable .htUISelectCaption:hover{background-color:var(--ht-input-hover-background-color);border-color:var(--ht-input-hover-border-color);color:var(--ht-input-hover-foreground-color)}.handsontable .htUISelectCaption:disabled{background-color:var(--ht-input-disabled-background-color);border-color:var(--ht-input-disabled-border-color);color:var(--ht-input-disabled-foreground-color)}.handsontable .htUISelectCaption:focus{background-color:var(--ht-input-focus-background-color);border-color:var(--ht-input-focus-border-color);color:var(--ht-input-focus-foreground-color)}.handsontable .htUISelect{cursor:pointer;outline:none!important;position:relative}.handsontable .htUISelect:focus .htUISelectCaption{background-color:var(--ht-input-focus-background-color);border-color:var(--ht-input-focus-border-color);color:var(--ht-input-focus-foreground-color)}[dir=rtl].handsontable .htUISelectCaption:after{left:calc(var(--ht-input-horizontal-padding) - var(--ht-icon-size)/4);right:auto}.handsontable .htFiltersMenuCondition .htUIInput input,.handsontable .htFiltersMenuValue .htUIMultipleSelectSearch input{background-color:var(--ht-input-background-color);border:var(--ht-input-border-width) solid var(--ht-input-border-color);border-radius:var(--ht-input-border-radius);box-sizing:border-box;color:var(--ht-input-foreground-color);cursor:pointer;font-family:inherit;font-size:var(--ht-font-size);font-weight:var(--ht-font-weight);line-height:var(--ht-line-height);outline:none!important;padding:var(--ht-input-vertical-padding) var(--ht-input-horizontal-padding);transition:var(--ht-table-transition) all ease-in-out;width:100%}.handsontable .htFiltersMenuCondition .htUIInput input:hover,.handsontable .htFiltersMenuValue .htUIMultipleSelectSearch input:hover{background-color:var(--ht-input-hover-background-color);border-color:var(--ht-input-hover-border-color);color:var(--ht-input-hover-foreground-color)}.handsontable .htFiltersMenuCondition .htUIInput input:disabled,.handsontable .htFiltersMenuValue .htUIMultipleSelectSearch input:disabled{background-color:var(--ht-input-disabled-background-color);border-color:var(--ht-input-disabled-border-color);color:var(--ht-input-disabled-foreground-color)}.handsontable .htFiltersMenuCondition .htUIInput input:focus,.handsontable .htFiltersMenuValue .htUIMultipleSelectSearch input:focus{background-color:var(--ht-input-focus-background-color);border-color:var(--ht-input-focus-border-color);color:var(--ht-input-focus-foreground-color)}.handsontable .htUIInput{outline:none!important;padding:0;position:relative;text-align:center}.handsontable .htUIInputIcon{position:absolute}.handsontable .htUIInput.htUIButton{cursor:pointer;display:inline-block}.handsontable .htUIInput.htUIButton input{background-color:var(--ht-secondary-button-background-color);border:1px solid var(--ht-secondary-button-border-color);border-radius:var(--ht-button-border-radius);box-sizing:border-box;color:var(--ht-secondary-button-foreground-color);cursor:pointer;font-family:inherit;font-size:var(--ht-font-size);font-weight:var(--ht-font-weight);line-height:var(--ht-line-height);min-width:64px;outline:none!important;padding:var(--ht-button-vertical-padding) var(--ht-button-horizontal-padding);transition:var(--ht-table-transition) all ease-in-out}.handsontable .htUIInput.htUIButton input:hover{background-color:var(--ht-secondary-button-hover-background-color);border-color:var(--ht-secondary-button-hover-border-color);color:var(--ht-secondary-button-hover-foreground-color)}.handsontable .htUIInput.htUIButton input:disabled{background-color:var(--ht-secondary-button-disabled-background-color);border-color:var(--ht-secondary-button-disabled-border-color);color:var(--ht-secondary-button-disabled-foreground-color)}.handsontable .htUIInput.htUIButton input:focus{background-color:var(--ht-secondary-button-focus-background-color);border-color:var(--ht-secondary-button-focus-border-color);box-shadow:0 0 0 1px var(--ht-accent-color);color:var(--ht-secondary-button-focus-foreground-color)}.handsontable .htUIInput.htUIButtonOK{margin-inline-end:calc(var(--ht-gap-size, 2px)*2);margin-inline-start:0}.handsontable .htUIInput.htUIButtonOK input{background-color:var(--ht-primary-button-background-color);border-color:var(--ht-primary-button-border-color);color:var(--ht-primary-button-foreground-color)}.handsontable .htUIInput.htUIButtonOK input:hover{background-color:var(--ht-primary-button-hover-background-color);border-color:var(--ht-primary-button-hover-border-color);color:var(--ht-primary-button-hover-foreground-color)}.handsontable .htUIInput.htUIButtonOK input:disabled{background-color:var(--ht-primary-button-disabled-background-color);border-color:var(--ht-primary-button-disabled-border-color);color:var(--ht-primary-button-disabled-foreground-color)}.handsontable .htUIInput.htUIButtonOK input:focus{background-color:var(--ht-primary-button-focus-background-color);border-color:var(--ht-primary-button-focus-border-color);box-shadow:0 0 0 1px var(--ht-accent-color);color:var(--ht-primary-button-focus-foreground-color)}.handsontable .htUIRadio{align-items:center;cursor:pointer;display:inline-flex;gap:var(--ht-gap-size);margin:0;padding:var(--ht-gap-size) calc(var(--ht-gap-size)*2);padding-bottom:0;position:relative}.handsontable .htUIRadio:first-child{padding-inline-start:0}.handsontable .htUIRadio>input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:calc(var(--ht-radio-size)*.5);cursor:pointer;height:var(--ht-radio-size);margin:0;outline:none;position:relative;width:var(--ht-radio-size)}.handsontable .htUIRadio>input[type=radio]:before{background-color:var(--ht-radio-background-color);border:1px solid var(--ht-radio-border-color);border-radius:calc(var(--ht-radio-size)*.5);content:"";display:block;inset:0;position:absolute}.handsontable .htUIRadio>input[type=radio]:after{color:var(--ht-radio-icon-color);content:"";display:block;position:absolute}.handsontable .htUIRadio>input[type=radio]:checked:before{background-color:var(--ht-radio-checked-background-color);border-color:var(--ht-radio-checked-border-color)}.handsontable .htUIRadio>input[type=radio]:checked:after{color:var(--ht-radio-checked-icon-color)}.handsontable .htUIRadio>input[type=radio]:checked:disabled{cursor:auto}.handsontable .htUIRadio>input[type=radio]:checked:disabled:before{background-color:var(--ht-radio-checked-disabled-background-color);border-color:var(--ht-radio-checked-disabled-border-color)}.handsontable .htUIRadio>input[type=radio]:checked:disabled:after{color:var(--ht-radio-checked-disabled-icon-color)}.handsontable .htUIRadio>input[type=radio]:checked:focus:before{background-color:var(--ht-radio-checked-focus-background-color);border-color:var(--ht-radio-checked-focus-border-color)}.handsontable .htUIRadio>input[type=radio]:checked:focus:after{color:var(--ht-radio-checked-focus-icon-color)}.handsontable .htUIRadio>input[type=radio]:disabled{cursor:auto}.handsontable .htUIRadio>input[type=radio]:disabled:before{background-color:var(--ht-radio-disabled-background-color);border-color:var(--ht-radio-disabled-border-color)}.handsontable .htUIRadio>input[type=radio]:disabled:after{color:var(--ht-radio-disabled-icon-color)}.handsontable .htUIRadio>input[type=radio]:focus:before{background-color:var(--ht-radio-focus-background-color);border-color:var(--ht-radio-focus-border-color);outline:1px solid var(--ht-radio-focus-ring-color)}.handsontable .htUIRadio>input[type=radio]:focus:after{color:var(--ht-radio-focus-icon-color)}.handsontable .htUIRadio label{color:inherit;cursor:pointer;vertical-align:middle}.handsontable .htUIRadio label:before{content:"";display:block;inset:0;position:absolute}.handsontable .collapsibleIndicator{margin-inline-end:1px;margin-inline-start:var(--ht-gap-size);top:calc((var(--ht-line-height) - var(--ht-icon-size))/2)}.handsontable .collapsibleIndicator,.handsontable .ht_nestingButton{border-radius:var(--ht-collapse-button-border-radius);box-sizing:border-box;cursor:pointer;float:right;font-size:0;height:var(--ht-icon-size);overflow:hidden;position:relative;text-indent:-100px;width:var(--ht-icon-size)}.handsontable .collapsibleIndicator:before,.handsontable .ht_nestingButton:before{content:"";display:block;left:0;position:absolute;top:0;transition:var(--ht-table-transition) all ease-in-out}.handsontable .collapsibleIndicator.expanded,.handsontable .collapsibleIndicator.ht_nestingCollapse,.handsontable .ht_nestingButton.expanded,.handsontable .ht_nestingButton.ht_nestingCollapse{background-color:var(--ht-collapse-button-open-background-color);box-shadow:0 0 0 1px var(--ht-collapse-button-open-border-color)}.handsontable .collapsibleIndicator.expanded:before,.handsontable .collapsibleIndicator.ht_nestingCollapse:before,.handsontable .ht_nestingButton.expanded:before,.handsontable .ht_nestingButton.ht_nestingCollapse:before{color:var(--ht-collapse-button-open-icon-color)}.handsontable .collapsibleIndicator.expanded:hover,.handsontable .collapsibleIndicator.ht_nestingCollapse:hover,.handsontable .ht_nestingButton.expanded:hover,.handsontable .ht_nestingButton.ht_nestingCollapse:hover{background-color:var(--ht-collapse-button-open-hover-background-color);box-shadow:0 0 0 1px var(--ht-collapse-button-open-hover-border-color)}.handsontable .collapsibleIndicator.expanded:hover:before,.handsontable .collapsibleIndicator.ht_nestingCollapse:hover:before,.handsontable .ht_nestingButton.expanded:hover:before,.handsontable .ht_nestingButton.ht_nestingCollapse:hover:before{color:var(--ht-collapse-button-open-hover-icon-color)}.handsontable .collapsibleIndicator.collapsed,.handsontable .collapsibleIndicator.ht_nestingExpand,.handsontable .ht_nestingButton.collapsed,.handsontable .ht_nestingButton.ht_nestingExpand{background-color:var(--ht-collapse-button-close-background-color);box-shadow:0 0 0 1px var(--ht-collapse-button-close-border-color)}.handsontable .collapsibleIndicator.collapsed:before,.handsontable .collapsibleIndicator.ht_nestingExpand:before,.handsontable .ht_nestingButton.collapsed:before,.handsontable .ht_nestingButton.ht_nestingExpand:before{color:var(--ht-collapse-button-close-icon-color)}.handsontable .collapsibleIndicator.collapsed:hover,.handsontable .collapsibleIndicator.ht_nestingExpand:hover,.handsontable .ht_nestingButton.collapsed:hover,.handsontable .ht_nestingButton.ht_nestingExpand:hover{background-color:var(--ht-collapse-button-close-hover-background-color);box-shadow:0 0 0 1px var(--ht-collapse-button-close-hover-border-color)}.handsontable .collapsibleIndicator.collapsed:hover:before,.handsontable .collapsibleIndicator.ht_nestingExpand:hover:before,.handsontable .ht_nestingButton.collapsed:hover:before,.handsontable .ht_nestingButton.ht_nestingExpand:hover:before{color:var(--ht-collapse-button-close-hover-icon-color)}.handsontable th.ht__active_highlight .collapsibleIndicator.collapsed:before,.handsontable th.ht__active_highlight .collapsibleIndicator.ht_nestingExpand:before,.handsontable th.ht__active_highlight .ht_nestingButton.collapsed:before,.handsontable th.ht__active_highlight .ht_nestingButton.ht_nestingExpand:before{color:var(--ht-collapse-button-close-icon-active-color)}.handsontable th.ht__active_highlight .collapsibleIndicator.collapsed:hover:before,.handsontable th.ht__active_highlight .collapsibleIndicator.ht_nestingExpand:hover:before,.handsontable th.ht__active_highlight .ht_nestingButton.collapsed:hover:before,.handsontable th.ht__active_highlight .ht_nestingButton.ht_nestingExpand:hover:before{color:var(--ht-collapse-button-close-hover-icon-active-color)}.handsontable th.ht__active_highlight .collapsibleIndicator.expanded:before,.handsontable th.ht__active_highlight .collapsibleIndicator.ht_nestingCollapse:before,.handsontable th.ht__active_highlight .ht_nestingButton.expanded:before,.handsontable th.ht__active_highlight .ht_nestingButton.ht_nestingCollapse:before{color:var(--ht-collapse-button-open-icon-active-color)}.handsontable th.ht__active_highlight .collapsibleIndicator.expanded:hover:before,.handsontable th.ht__active_highlight .collapsibleIndicator.ht_nestingCollapse:hover:before,.handsontable th.ht__active_highlight .ht_nestingButton.expanded:hover:before,.handsontable th.ht__active_highlight .ht_nestingButton.ht_nestingCollapse:hover:before{color:var(--ht-collapse-button-open-hover-icon-active-color)}[dir=rtl].handsontable .collapsibleIndicator,[dir=rtl].handsontable .ht_nestingButton{float:left}.handsontable thead th.hiddenHeader:not(:first-of-type){display:none}.handsontable thead th.hiddenHeaderText .colHeader{opacity:0}.handsontable th.ht_nestingLevels>.relative{align-items:center;display:flex;gap:5px}.handsontable th.ht_nestingLevels span:last-child{padding-left:calc(var(--ht-icon-size) + 5px)}.handsontable th.ht_nestingLevels span.ht_nestingLevel{display:inline-block}.handsontable th.ht_nestingLevels span.ht_nestingLevel_empty{display:inline-block;height:1px;order:-2;position:relative;width:5px}.handsontable th.ht_nestingLevels .ht_nestingButton{cursor:pointer;order:-1;position:relative}.handsontable th.afterHiddenColumn,.handsontable th.beforeHiddenColumn{position:relative}.handsontable th.afterHiddenColumn:after,.handsontable th.afterHiddenColumn:before,.handsontable th.beforeHiddenColumn:after,.handsontable th.beforeHiddenColumn:before{color:var(--ht-hidden-indicator-color);height:10px!important;position:absolute;top:50%;transform:translateY(-50%);width:10px!important}.handsontable th.beforeHiddenColumn:after{content:"";display:block;right:-2px}.handsontable th.afterHiddenColumn:before{content:"";display:block;left:-2px}.handsontable th.ht__active_highlight.afterHiddenColumn:after,.handsontable th.ht__active_highlight.afterHiddenColumn:before,.handsontable th.ht__active_highlight.beforeHiddenColumn:after,.handsontable th.ht__active_highlight.beforeHiddenColumn:before{color:var(--ht-icon-button-active-icon-color,var(--ht-icon-active-button-icon-color))}[dir=rtl].handsontable th.beforeHiddenColumn:after{left:-2px;right:auto;transform:translateY(-50%) rotate(180deg)}[dir=rtl].handsontable th.afterHiddenColumn:before{left:auto;right:-2px;transform:translateY(-50%) rotate(180deg)}.handsontable th.afterHiddenRow,.handsontable th.beforeHiddenRow{position:relative}.handsontable th.afterHiddenRow:after,.handsontable th.afterHiddenRow:before,.handsontable th.beforeHiddenRow:after,.handsontable th.beforeHiddenRow:before{color:var(--ht-hidden-indicator-color);height:10px!important;left:50%;position:absolute;transform:translateX(-50%);width:10px!important}.handsontable th.beforeHiddenRow:after{bottom:-2px;content:"";display:block}.handsontable th.afterHiddenRow:before{content:"";display:block;top:-2px}.handsontable th.ht__active_highlight.afterHiddenRow:after,.handsontable th.ht__active_highlight.afterHiddenRow:before,.handsontable th.ht__active_highlight.beforeHiddenRow:after,.handsontable th.ht__active_highlight.beforeHiddenRow:before{color:var(--ht-icon-button-active-icon-color,var(--ht-icon-active-button-icon-color))}.handsontable .changeType{background-color:var(--ht-icon-button-background-color);border:none;border-radius:var(--ht-icon-button-border-radius);box-shadow:0 0 0 1px var(--ht-icon-button-border-color);box-sizing:border-box;color:inherit;float:right;height:var(--ht-icon-size);margin:0;margin-inline-end:1px;margin-inline-start:var(--ht-gap-size);order:1;padding:0;position:relative;top:calc((var(--ht-line-height) - var(--ht-icon-size))/2);width:var(--ht-icon-size);z-index:1}.handsontable .changeType:before{color:var(--ht-icon-button-icon-color);content:"";display:block;left:0;position:absolute;top:0}.handsontable .changeType:hover{background-color:var(--ht-icon-button-hover-background-color);box-shadow:0 0 0 1px var(--ht-icon-button-hover-border-color);cursor:pointer}.handsontable .changeType:hover:before{color:var(--ht-icon-button-hover-icon-color)}.handsontable .ht__active_highlight .changeType{background-color:var(--ht-icon-button-active-background-color,var(--ht-icon-active-button-background-color));box-shadow:0 0 0 1px var(--ht-icon-button-active-border-color,var(--ht-icon-active-button-border-color))}.handsontable .ht__active_highlight .changeType:before{color:var(--ht-icon-button-active-icon-color,var(--ht-icon-active-button-icon-color))}.handsontable .ht__active_highlight .changeType:hover{background-color:var(--ht-icon-button-active-hover-background-color,var(--ht-icon-active-button-hover-background-color));box-shadow:0 0 0 1px var(--ht-icon-button-active-hover-border-color,var(--ht-icon-active-button-hover-border-color))}.handsontable .ht__active_highlight .changeType:hover:before{color:var(--ht-icon-button-active-hover-icon-color,var(--ht-icon-active-button-hover-icon-color))}.handsontable th.htFiltersActive{background-color:var(--ht-header-filter-background-color)}.handsontable th.htFiltersActive.ht__active_highlight{background-color:color-mix(in srgb,var(--ht-header-active-background-color),var(--ht-header-filter-background-color) 20%)}.handsontable th.htFiltersActive.ht__active_highlight .changeType:after{background-color:var(--ht-header-active-foreground-color)}.handsontable.htContextMenu>.ht_master,.handsontable.htDropdownMenu>.ht_master,.handsontable.htFiltersConditionsMenu>.ht_master{background-color:var(--ht-background-color,#fff);border:var(--ht-menu-border-width,1px) solid var(--ht-menu-border-color,#e5e5e9);border-radius:var(--ht-menu-border-radius);box-shadow:var(--ht-menu-shadow-x,0) var(--ht-menu-shadow-y,0) var(--ht-menu-shadow-blur,8px) var(--ht-menu-shadow-color,rgba(0,0,0,.08));overflow:hidden;padding:var(--ht-menu-vertical-padding,8px) var(--ht-menu-horizontal-padding,0)}.handsontable.htContextMenu:not(.htGhostTable),.handsontable.htDropdownMenu:not(.htGhostTable),.handsontable.htFiltersConditionsMenu:not(.htGhostTable){display:none;position:absolute;z-index:1060}.handsontable.htContextMenu .ht_clone_bottom,.handsontable.htContextMenu .ht_clone_bottom_inline_start_corner,.handsontable.htContextMenu .ht_clone_inline_start,.handsontable.htContextMenu .ht_clone_top,.handsontable.htContextMenu .ht_clone_top_inline_start_corner,.handsontable.htDropdownMenu .ht_clone_bottom,.handsontable.htDropdownMenu .ht_clone_bottom_inline_start_corner,.handsontable.htDropdownMenu .ht_clone_inline_start,.handsontable.htDropdownMenu .ht_clone_top,.handsontable.htDropdownMenu .ht_clone_top_inline_start_corner,.handsontable.htFiltersConditionsMenu .ht_clone_bottom,.handsontable.htFiltersConditionsMenu .ht_clone_bottom_inline_start_corner,.handsontable.htFiltersConditionsMenu .ht_clone_inline_start,.handsontable.htFiltersConditionsMenu .ht_clone_top,.handsontable.htFiltersConditionsMenu .ht_clone_top_inline_start_corner{display:none}.handsontable.htContextMenu table.htCore,.handsontable.htDropdownMenu table.htCore,.handsontable.htFiltersConditionsMenu table.htCore{overflow:hidden}.handsontable.htContextMenu .htCustomMenuRenderer .table.htCore,.handsontable.htDropdownMenu .htCustomMenuRenderer .table.htCore,.handsontable.htFiltersConditionsMenu .htCustomMenuRenderer .table.htCore{box-shadow:none}.handsontable.htContextMenu.handsontable:focus,.handsontable.htDropdownMenu.handsontable:focus,.handsontable.htFiltersConditionsMenu.handsontable:focus{outline:none}.handsontable.htContextMenu .wtBorder,.handsontable.htDropdownMenu .wtBorder,.handsontable.htFiltersConditionsMenu .wtBorder{visibility:hidden}.handsontable.htContextMenu tbody tr:first-of-type td:first-child,.handsontable.htContextMenu tbody tr:first-of-type th:first-child,.handsontable.htDropdownMenu tbody tr:first-of-type td:first-child,.handsontable.htDropdownMenu tbody tr:first-of-type th:first-child,.handsontable.htFiltersConditionsMenu tbody tr:first-of-type td:first-child,.handsontable.htFiltersConditionsMenu tbody tr:first-of-type th:first-child{height:calc(var(--ht-cell-vertical-padding)*2 + var(--ht-line-height) + 1px)}.handsontable.htContextMenu table tbody tr td,.handsontable.htDropdownMenu table tbody tr td,.handsontable.htFiltersConditionsMenu table tbody tr td{background:var(--ht-background-color,#fff);border-width:0;cursor:pointer;overflow:hidden;padding:var(--ht-menu-item-vertical-padding,4px) var(--ht-menu-item-horizontal-padding,8px);position:relative;text-overflow:ellipsis;transition:var(--ht-table-transition) background ease-in-out;white-space:nowrap}.handsontable.htContextMenu table tbody tr td:first-child,.handsontable.htDropdownMenu table tbody tr td:first-child,.handsontable.htFiltersConditionsMenu table tbody tr td:first-child{border-bottom-width:0;border-inline-end-width:0;border-inline-start-width:0;border-top-width:0}.handsontable.htContextMenu table tbody tr td.htDimmed,.handsontable.htDropdownMenu table tbody tr td.htDimmed,.handsontable.htFiltersConditionsMenu table tbody tr td.htDimmed{background-color:inherit!important;color:inherit!important;font-style:normal}.handsontable.htContextMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htDropdownMenu table tbody tr td.htDisabled,.handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htContextMenu table tbody tr td.htDisabled,.handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled):hover,.handsontable.htDropdownMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htDropdownMenu table tbody tr td.htDisabled,.handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htContextMenu table tbody tr td.htDisabled,.handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled):hover,.handsontable.htFiltersConditionsMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htDropdownMenu table tbody tr td.htDisabled,.handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htContextMenu table tbody tr td.htDisabled,.handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled):hover{background:var(--ht-menu-item-hover-color,#e5e5e9)!important;cursor:pointer}.handsontable.htContextMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htDropdownMenu table tbody tr td.htDisabled,.handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htContextMenu table tbody tr td.htDisabled,.handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled).current:not([aria-expanded=true]),.handsontable.htDropdownMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htDropdownMenu table tbody tr td.htDisabled,.handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htContextMenu table tbody tr td.htDisabled,.handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled).current:not([aria-expanded=true]),.handsontable.htFiltersConditionsMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htDropdownMenu table tbody tr td.htDisabled,.handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htContextMenu table tbody tr td.htDisabled,.handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer,.handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled).current:not([aria-expanded=true]){box-shadow:inset 0 0 0 1px var(--ht-accent-color)}.handsontable.htContextMenu table tbody tr td.htSubmenu .htItemWrapper,.handsontable.htDropdownMenu table tbody tr td.htSubmenu .htItemWrapper,.handsontable.htFiltersConditionsMenu table tbody tr td.htSubmenu .htItemWrapper{margin-inline-end:calc(var(--ht-gap-size, 4px)*2 + var(--ht-icon-size))}.handsontable.htContextMenu table tbody tr td.htSubmenu .htItemWrapper:after,.handsontable.htDropdownMenu table tbody tr td.htSubmenu .htItemWrapper:after,.handsontable.htFiltersConditionsMenu table tbody tr td.htSubmenu .htItemWrapper:after{content:"";display:block;position:absolute;right:calc(var(--ht-menu-item-horizontal-padding) + var(--ht-gap-size)*2);top:50%;transform:translateY(-50%)}.handsontable.htContextMenu table tbody tr td.htSeparator,.handsontable.htDropdownMenu table tbody tr td.htSeparator,.handsontable.htFiltersConditionsMenu table tbody tr td.htSeparator{border-top:1px solid var(--ht-border-color);cursor:default;height:0;padding:0}.handsontable.htContextMenu table tbody tr td.htDisabled,.handsontable.htDropdownMenu table tbody tr td.htDisabled,.handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled{color:var(--ht-disabled-color);cursor:default}.handsontable.htContextMenu table tbody tr td.htDisabled:hover,.handsontable.htDropdownMenu table tbody tr td.htDisabled:hover,.handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled:hover{background:var(--ht-background-color);color:var(--ht-disabled-color)}.handsontable.htContextMenu table tbody tr td.htHidden,.handsontable.htDropdownMenu table tbody tr td.htHidden,.handsontable.htFiltersConditionsMenu table tbody tr td.htHidden{display:none}.handsontable.htContextMenu table tbody tr td:has(.htItemWrapper .selected),.handsontable.htDropdownMenu table tbody tr td:has(.htItemWrapper .selected),.handsontable.htFiltersConditionsMenu table tbody tr td:has(.htItemWrapper .selected){background-color:var(--ht-menu-item-active-color)}.handsontable.htContextMenu table tbody tr td .htItemWrapper,.handsontable.htDropdownMenu table tbody tr td .htItemWrapper,.handsontable.htFiltersConditionsMenu table tbody tr td .htItemWrapper{margin-inline:calc(var(--ht-gap-size, 4px)*2)}.handsontable.htContextMenu table tbody tr td .htItemWrapper:before,.handsontable.htDropdownMenu table tbody tr td .htItemWrapper:before,.handsontable.htFiltersConditionsMenu table tbody tr td .htItemWrapper:before{margin-right:12px;vertical-align:text-bottom}.handsontable.htContextMenu table tbody tr td .htItemWrapper span.selected,.handsontable.htDropdownMenu table tbody tr td .htItemWrapper span.selected,.handsontable.htFiltersConditionsMenu table tbody tr td .htItemWrapper span.selected{font-size:0;inset:0}.handsontable.htContextMenu table tbody tr td .htItemWrapper span.selected:after,.handsontable.htDropdownMenu table tbody tr td .htItemWrapper span.selected:after,.handsontable.htFiltersConditionsMenu table tbody tr td .htItemWrapper span.selected:after{color:var(--ht-accent-color);content:"";display:block;position:absolute;right:calc(var(--ht-menu-item-horizontal-padding) + var(--ht-gap-size)*2);top:50%;transform:translateY(-50%)}.handsontable.htContextMenu table tbody tr td div span.selected,.handsontable.htDropdownMenu table tbody tr td div span.selected,.handsontable.htFiltersConditionsMenu table tbody tr td div span.selected{inset-inline-end:0;position:absolute}.handsontable.htContextMenu table tbody tr td .htUIButton,.handsontable.htDropdownMenu table tbody tr td .htUIButton,.handsontable.htFiltersConditionsMenu table tbody tr td .htUIButton{width:calc(50% - var(--ht-gap-size))}.handsontable.htContextMenu table tbody tr td .htUIButton input,.handsontable.htDropdownMenu table tbody tr td .htUIButton input,.handsontable.htFiltersConditionsMenu table tbody tr td .htUIButton input{width:100%}.handsontable .htUIClearAll a,.handsontable .htUISelectAll a{display:inline-block;padding:var(--ht-gap-size);text-decoration:none}.handsontable .htUIMultipleSelect .ht_master .wtHolder{background:transparent;border-radius:0!important;overflow-y:scroll!important}.handsontable .htUIMultipleSelect .ht_master .wtHolder .htCore{box-shadow:none}[dir=rtl].handsontable.htContextMenu table tbody tr td.htSubmenu .htItemWrapper:after,[dir=rtl].handsontable.htDropdownMenu table tbody tr td.htSubmenu .htItemWrapper:after,[dir=rtl].handsontable.htFiltersConditionsMenu table tbody tr td.htSubmenu .htItemWrapper:after{left:calc(var(--ht-gap-size)*4);right:auto;transform:translateY(-50%) rotate(180deg)}[dir=rtl].handsontable.htContextMenu table tbody tr td .htItemWrapper span.selected:after,[dir=rtl].handsontable.htDropdownMenu table tbody tr td .htItemWrapper span.selected:after,[dir=rtl].handsontable.htFiltersConditionsMenu table tbody tr td .htItemWrapper span.selected:after{left:calc(var(--ht-gap-size)*4);right:auto}[dir=rtl].handsontable .changeType{float:left}.handsontable.htFiltersConditionsMenu:not(.htGhostTable){z-index:1070}.handsontable .ht_master table td.htCustomMenuRenderer{cursor:auto}.handsontable .ht_master table td.htCustomMenuRenderer.htFiltersMenuActionBar{padding-top:calc(var(--ht-menu-item-vertical-padding, 4px)*2)}.handsontable .htFiltersMenuLabel{font-size:var(--ht-font-size-small);font-weight:var(--ht-font-weight);line-height:var(--ht-line-height-small);margin-bottom:calc(var(--ht-gap-size, 2px)*2)}.handsontable .htFiltersMenuLabel:empty{display:none}.handsontable .htFiltersMenuCondition{padding-bottom:0!important;padding-top:calc(var(--ht-gap-size, 2px)*3)!important}.handsontable .htFiltersMenuCondition .border{border-bottom:1px solid var(--ht-border-color)!important}.handsontable .htFiltersMenuCondition .htUIInput{margin-top:calc(var(--ht-gap-size, 2px)*2)}.handsontable .htFiltersMenuValue{border-bottom:1px solid var(--ht-border-color)!important;padding-bottom:0!important;padding-top:calc(var(--ht-gap-size, 2px)*3)!important}.handsontable .htFiltersMenuOperators{padding-bottom:0!important;padding-top:calc(var(--ht-gap-size, 2px)*2)!important}.handsontable .htUISelectionControls{margin:0 calc(var(--ht-gap-size, 2px)*-1);padding-bottom:var(--ht-gap-size,2px)!important;padding-top:calc(var(--ht-gap-size, 2px)*2)!important}.handsontable .htUIMultipleSelectHot{--ht-cell-horizontal-padding:calc(var(--ht-menu-item-horizontal-padding, 2px) + var(--ht-gap-size, 2px)*2);margin:0 calc((var(--ht-menu-item-horizontal-padding, 2px) + var(--ht-gap-size, 2px)*2)*-1);overflow:initial!important;width:calc(100% + var(--ht-menu-item-horizontal-padding, 2px)*2 + var(--ht-gap-size, 2px)*4)}.handsontable .htUIMultipleSelectHot:before{background-color:var(--ht-border-color);content:"";display:block;height:1px;left:0;position:absolute;top:-1px;width:100%}.handsontable .htUIMultipleSelectHot .wtHolder{box-sizing:border-box;overflow-x:hidden;padding:0}.handsontable .htUIMultipleSelectHot .wtHolder .wtSpreader{padding:calc(var(--ht-gap-size)*2) 0}.handsontable .htUIMultipleSelectHot .wtHolder td{height:auto!important;padding:4px var(--ht-cell-horizontal-padding)}.handsontable .htUIClearAll,.handsontable .htUISelectAll{display:inline-block;margin-bottom:var(--ht-gap-size,4px);margin-right:var(--ht-gap-size,4px)}.handsontable .htUIClearAll a,.handsontable .htUISelectAll a{border-radius:var(--ht-button-border-radius);color:var(--ht-link-color);font-size:var(--ht-font-size);line-height:var(--ht-line-height)}.handsontable .htUIClearAll a:hover,.handsontable .htUISelectAll a:hover{color:var(--ht-link-hover-color)}.handsontable .htUIClearAll a:focus,.handsontable .htUISelectAll a:focus{outline:1px solid var(--ht-link-hover-color)}.handsontable .htUIMultipleSelect .ht_master .wtHolder{overflow:auto}.handsontable .htUIMultipleSelect .ht_master .wtHolder .htCore,.handsontable .htUIMultipleSelect .ht_master .wtHolder .wtHider,.handsontable .htUIMultipleSelect .ht_master .wtHolder td,.handsontable .htUIMultipleSelect .ht_master .wtHolder tr{background:none}.handsontable .htCommentCell{position:relative}.handsontable .htCommentCell:after{border-inline-end:none;border-inline-start:var(--ht-comments-indicator-size,4px) solid transparent;border-top:var(--ht-comments-indicator-size,4px) solid var(--ht-comments-indicator-color,#1a42e8);content:"";display:block;inset-inline-end:0;inset-inline-start:unset;position:absolute;top:0}.htCommentsContainer .htComments{display:none;position:absolute;z-index:1059}.htCommentsContainer .htCommentTextArea{-webkit-appearance:none;background-color:var(--ht-comments-textarea-background-color,#fff);border:var(--ht-comments-textarea-border-width,1px) solid var(--ht-comments-textarea-border-color,transparent);border-inline-start:var(--ht-comments-textarea-border-width,1px) solid var(--ht-comments-textarea-border-color,#1a42e8);box-shadow:var(--ht-menu-shadow-x,0) var(--ht-menu-shadow-y,0) var(--ht-menu-shadow-blur,8px) var(--ht-menu-shadow-color,rgba(0,0,0,.08));box-sizing:border-box;color:var(--ht-comments-textarea-foreground-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Arial,sans-serif;font-size:var(--ht-font-size);font-weight:var(--ht-font-weight);height:88px;line-height:var(--ht-line-height);margin:0 -1px;outline:0!important;padding:var(--ht-comments-textarea-vertical-padding) var(--ht-comments-textarea-horizontal-padding);width:240px}.htCommentsContainer .htCommentTextArea:focus{background-color:var(--ht-comments-textarea-focus-background-color,#fff);border:var(--ht-comments-textarea-focus-border-width,1px) solid var(--ht-comments-textarea-focus-border-color,#1a42e8);color:var(--ht-comments-textarea-focus-foreground-color)}.handsontable .columnSorting:not(.indicatorDisabled){position:relative}.handsontable .columnSorting:not(.indicatorDisabled).sortAction{max-width:calc(100% - var(--ht-icon-size, 16px)*2 - 4px);min-width:calc(var(--ht-icon-size, 16px) + 8px);padding-inline-end:calc(var(--ht-icon-size, 16px) + 2px);padding-inline-start:calc(var(--ht-icon-size, 16px) + 2px)}.handsontable .columnSorting:not(.indicatorDisabled).sortAction:hover{cursor:pointer;text-decoration:none}.handsontable .columnSorting:not(.indicatorDisabled).sortAction:before{content:"";display:block;position:absolute;right:2px;text-align:right;top:50%;transform:translateY(-50%);width:var(--ht-icon-size,16px)}.handsontable .htLeft .columnSorting.sortAction{padding-inline-start:0}.handsontable .htRight .columnSorting.sortAction{padding-inline-end:var(--ht-gap-size,4px);padding-inline-start:var(--ht-icon-size,16px)}.handsontable .htRight .columnSorting.sortAction:before,[dir=rtl] .handsontable .columnSorting.sortAction:before{left:2px;right:auto;text-align:left}[dir=rtl] .handsontable .htRight .columnSorting.sortAction{padding-inline-end:var(--ht-icon-size,16px);padding-inline-start:var(--ht-gap-size,4px)}[dir=rtl] .handsontable .htLeft .columnSorting.sortAction{padding-inline-end:var(--ht-gap-size,4px);padding-inline-start:var(--ht-icon-size,16px)}[dir=rtl] .handsontable .htLeft .columnSorting.sortAction:before{left:auto;right:2px;text-align:right}.htGhostTable .htCore span.colHeader.columnSorting:not(.indicatorDisabled):before{content:"*";display:inline-block;padding-right:20px;position:relative}.handsontable .colHeader.columnSorting:after{content:"";display:block;font-size:8px;margin-top:4px;position:absolute;right:0;text-align:right;top:50%;transform:translateY(-50%);width:8px}.handsontable .colHeader.columnSorting[class*=" sort-"]:after,.handsontable .colHeader.columnSorting[class^=sort-]:after{content:"+"}.handsontable .colHeader.columnSorting.sort-1:after{content:"1"}.handsontable .colHeader.columnSorting.sort-2:after{content:"2"}.handsontable .colHeader.columnSorting.sort-3:after{content:"3"}.handsontable .colHeader.columnSorting.sort-4:after{content:"4"}.handsontable .colHeader.columnSorting.sort-5:after{content:"5"}.handsontable .colHeader.columnSorting.sort-6:after{content:"6"}.handsontable .colHeader.columnSorting.sort-7:after{content:"7"}.handsontable .htRight .colHeader.columnSorting:after,[dir=rtl] .handsontable .colHeader.columnSorting:after{left:0;right:auto;text-align:left}[dir=rtl] .handsontable .htLeft .colHeader.columnSorting:after{left:auto;right:0;text-align:right}.htGhostTable th div button.changeType+span.colHeader.columnSorting:not(.indicatorDisabled){padding-right:var(--ht-gap-size)}.handsontable .htRowHeaders .ht_master.innerBorderInlineStart~.ht_clone_inline_start td:first-of-type,.handsontable .htRowHeaders .ht_master.innerBorderInlineStart~.ht_clone_top_inline_start_corner th:nth-child(2){border-left:0}.handsontable .ht_clone_top_inline_start_corner th.ht__active_highlight{box-shadow:none}.handsontable .manualColumnResizer{background:none;cursor:col-resize;margin:0;opacity:0;position:absolute;top:0;width:10px;z-index:210}.handsontable .manualColumnResizer:after,.handsontable .manualColumnResizer:before{background:var(--ht-resize-indicator-color);border-radius:2px;content:"";display:block;height:calc(100% - 12px);left:1px;margin-top:.5px;max-height:16px;position:absolute;top:50%;transform:translateY(-50%);width:2px}.handsontable .manualColumnResizer:after{left:auto;right:0}.handsontable .manualColumnResizer.active,.handsontable .manualColumnResizer:hover{opacity:1}.handsontable .manualColumnResizerGuide{border-inline-end:1px solid var(--ht-accent-color);border-inline-start:none;display:none;inset-inline-end:unset;margin-inline-end:unset;margin-inline-start:5px;position:absolute;top:0;width:0}.handsontable .manualColumnResizerGuide.active{display:block;z-index:209}.handsontable .manualRowResizer{background:none;cursor:row-resize;height:10px;left:0;margin:0;opacity:0;position:absolute;z-index:210}.handsontable .manualRowResizer:after,.handsontable .manualRowResizer:before{background:var(--ht-resize-indicator-color);border-radius:2px;content:"";display:block;height:2px;left:50%;max-width:16px;position:absolute;top:1px;transform:translateX(-50%);width:calc(100% - 12px)}.handsontable .manualRowResizer:after{bottom:0;top:auto}.handsontable .manualRowResizer.active,.handsontable .manualRowResizer:hover{opacity:1}.handsontable .manualRowResizerGuide{border-bottom:1px solid var(--ht-accent-color);border-top:none;bottom:0;display:none;height:0;left:0;margin-top:5px;position:absolute}.handsontable .manualRowResizerGuide.active{display:block;z-index:209}.handsontable tbody td[rowspan][class*=area][class*=highlight]:not([class*=fullySelectedMergedCell]):before{opacity:0}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-0]:before,.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-multiple]:before{opacity:.14}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-1]:before{opacity:.21}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-2]:before{opacity:.28}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-3]:before{opacity:.35}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-4]:before{opacity:.42}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-5]:before{opacity:.49}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-6]:before{opacity:.56}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-7]:before{opacity:.63}.handsontable .ht__manualColumnMove.after-selection--columns thead th.ht__highlight,.handsontable.ht__manualColumnMove.after-selection--columns thead th.ht__highlight{cursor:move;cursor:grab}.handsontable .ht__manualColumnMove.on-moving--columns *,.handsontable .ht__manualColumnMove.on-moving--columns thead th.ht__highlight,.handsontable.ht__manualColumnMove.on-moving--columns *,.handsontable.ht__manualColumnMove.on-moving--columns thead th.ht__highlight{cursor:move;cursor:grabbing}.handsontable .ht__manualColumnMove.on-moving--columns .manualColumnResizer,.handsontable.ht__manualColumnMove.on-moving--columns .manualColumnResizer{display:none}.handsontable .ht__manualColumnMove--backlight,.handsontable .ht__manualColumnMove--guideline,.handsontable.ht__manualColumnMove--backlight,.handsontable.ht__manualColumnMove--guideline{display:none;height:100%;position:absolute}.handsontable .ht__manualColumnMove--guideline,.handsontable.ht__manualColumnMove--guideline{background:var(--ht-move-indicator-color,#1a42e8);margin-inline-end:0;margin-inline-start:-.5px;top:0;width:1px;z-index:205}.handsontable .ht__manualColumnMove--backlight,.handsontable.ht__manualColumnMove--backlight{background:var(--ht-move-backlight-color);display:none;pointer-events:none;z-index:205}.handsontable .on-moving--columns .ht__manualColumnMove--backlight,.handsontable .on-moving--columns.show-ui .ht__manualColumnMove--guideline,.handsontable.on-moving--columns .ht__manualColumnMove--backlight,.handsontable.on-moving--columns.show-ui .ht__manualColumnMove--guideline{display:block}.handsontable .wtHider{position:relative}.handsontable .ht__manualRowMove.after-selection--rows tbody th.ht__highlight,.handsontable.ht__manualRowMove.after-selection--rows tbody th.ht__highlight{cursor:move;cursor:grab}.handsontable .ht__manualRowMove.on-moving--rows *,.handsontable .ht__manualRowMove.on-moving--rows tbody th.ht__highlight,.handsontable.ht__manualRowMove.on-moving--rows *,.handsontable.ht__manualRowMove.on-moving--rows tbody th.ht__highlight{cursor:move;cursor:grabbing}.handsontable .ht__manualRowMove.on-moving--rows .manualRowResizer,.handsontable.ht__manualRowMove.on-moving--rows .manualRowResizer{display:none}.handsontable .ht__manualRowMove--backlight,.handsontable .ht__manualRowMove--guideline,.handsontable.ht__manualRowMove--backlight,.handsontable.ht__manualRowMove--guideline{display:none;position:absolute;width:100%}.handsontable .ht__manualRowMove--guideline,.handsontable.ht__manualRowMove--guideline{border-top:1px solid var(--ht-move-indicator-color);left:0;z-index:205}.handsontable .ht__manualRowMove--backlight,.handsontable.ht__manualRowMove--backlight{background:var(--ht-move-backlight-color);display:none;pointer-events:none;z-index:205}.handsontable .on-moving--rows .ht__manualRowMove--backlight,.handsontable .on-moving--rows.show-ui .ht__manualRowMove--guideline,.handsontable.on-moving--rows .ht__manualRowMove--backlight,.handsontable.on-moving--rows.show-ui .ht__manualRowMove--guideline{display:block}.ht-dialog{border:1px solid var(--ht-border-color);border-radius:var(--ht-wrapper-border-radius);box-sizing:border-box!important;display:none;font-size:var(--ht-font-size);height:100%;left:0;letter-spacing:var(--ht-letter-spacing);line-height:var(--ht-line-height);opacity:0;overflow-y:auto;position:absolute;top:0;width:100%;z-index:1060}.ht-dialog[dir=rtl]{left:auto;right:0}.ht-dialog:focus{border:1px solid var(--ht-accent-color);outline:none}.ht-dialog:has(.htFocusCatcher:focus){border:1px solid var(--ht-accent-color);outline:none}.ht-dialog *{box-sizing:border-box!important}.ht-dialog--background-solid{background-color:var(--ht-dialog-solid-background-color)}.ht-dialog--background-semi-transparent{background-color:var(--ht-dialog-semi-transparent-background-color)}.ht-dialog--animation{transition:opacity var(--ht-table-transition) ease-in-out}.ht-dialog--show{opacity:1}.ht-dialog__content-wrapper{align-items:center;border-radius:var(--ht-wrapper-border-radius);display:flex;justify-content:center;min-height:100%;padding:calc(var(--ht-gap-size)*4);width:100%}.ht-dialog__content{color:var(--ht-foreground-color);max-width:480px;padding:var(--ht-dialog-content-padding-horizontal) var(--ht-dialog-content-padding-vertical);position:relative}.ht-dialog__content--background{background-color:var(--ht-dialog-content-background-color);border-radius:var(--ht-dialog-content-border-radius);box-shadow:var(--ht-shadow-x,0) var(--ht-shadow-y,0) var(--ht-shadow-blur,8px) var(--ht-shadow-color,rgba(0,0,0,.08))}.handsontable.ht-pagination{background:var(--ht-pagination-bar-background-color);border:1px solid var(--ht-wrapper-border-color);border-radius:0 0 var(--ht-wrapper-border-radius) var(--ht-wrapper-border-radius);border-top:1px solid transparent;box-sizing:border-box;color:var(--ht-pagination-bar-foreground-color);font-size:var(--ht-font-size);line-height:var(--ht-line-height);overflow-x:auto}.handsontable.ht-pagination--bordered{border-top-color:var(--ht-wrapper-border-color)}.handsontable.ht-pagination .ht-pagination__inner{align-items:center;border-radius:0 0 var(--ht-wrapper-border-radius) var(--ht-wrapper-border-radius);display:flex;flex-wrap:wrap;gap:calc(var(--ht-gap-size)*4);justify-content:space-between;min-width:230px;padding-block:var(--ht-pagination-bar-vertical-padding);padding-inline:var(--ht-pagination-bar-horizontal-padding)}.handsontable.ht-pagination .ht-page-size-section{align-items:center;display:flex;gap:calc(var(--ht-gap-size)*2)}.handsontable.ht-pagination .ht-page-size-section__label{white-space:nowrap}.handsontable.ht-pagination .ht-page-size-section__select-wrapper{border-radius:var(--ht-input-border-radius);position:relative}.handsontable.ht-pagination .ht-page-size-section__select-wrapper select{-webkit-appearance:none;background-color:var(--ht-input-background-color);border:1px solid var(--ht-input-border-color);border-radius:var(--ht-input-border-radius);color:var(--ht-input-foreground-color);cursor:pointer;font-size:inherit;line-height:calc(var(--ht-line-height) - 4px);padding-inline-end:calc(var(--ht-gap-size) + var(--ht-icon-size));padding-bottom:var(--ht-gap-size);padding-inline-start:var(--ht-gap-size);padding-top:var(--ht-gap-size)}.handsontable.ht-pagination .ht-page-size-section__select-wrapper select:disabled{background-color:var(--ht-input-disabled-background-color);border-color:var(--ht-input-disabled-border-color);color:var(--ht-input-disabled-foreground-color);cursor:default;opacity:.4}.handsontable.ht-pagination .ht-page-size-section__select-wrapper select:hover:not(:disabled){background-color:var(--ht-input-hover-background-color);border-color:var(--ht-input-hover-border-color);color:var(--ht-input-hover-foreground-color)}.handsontable.ht-pagination .ht-page-size-section__select-wrapper select:focus{background-color:var(--ht-input-focus-background-color);border-color:var(--ht-input-focus-border-color);color:var(--ht-input-focus-foreground-color);outline:none}.handsontable.ht-pagination .ht-page-size-section__select-wrapper:after{background-color:var(--ht-foreground-color);content:"";display:block;inset-block-end:50%;inset-inline-end:var(--ht-gap-size);pointer-events:none;position:absolute;transform:translateY(50%)}.handsontable.ht-pagination .ht-page-counter-section{margin-inline-end:auto}.handsontable.ht-pagination .ht-page-navigation-section{align-items:center;display:flex;gap:1px}.handsontable.ht-pagination .ht-page-navigation-section__button{background-color:var(--ht-pagination-bar-background-color);border:1px solid var(--ht-pagination-bar-background-color);border-radius:var(--ht-icon-button-large-border-radius);color:var(--ht-secondary-button-foreground-color);cursor:pointer;font-size:inherit;padding:var(--ht-icon-button-large-padding)}.handsontable.ht-pagination .ht-page-navigation-section__button:before{content:"";display:block}.handsontable.ht-pagination .ht-page-navigation-section__button--disabled{color:var(--ht-secondary-button-disabled-foreground-color);cursor:default;pointer-events:none}.handsontable.ht-pagination .ht-page-navigation-section__button:hover:not(:disabled){background-color:var(--ht-secondary-button-hover-background-color)}.handsontable.ht-pagination .ht-page-navigation-section__button:focus{border:1px solid var(--ht-accent-color);outline:none}.handsontable.ht-pagination .ht-page-navigation-section__label{min-width:100px;text-align:center;white-space:nowrap}.handsontable.ht-wrapper.htPagination,.handsontable.ht-wrapper.htPagination .htCore{border-end-end-radius:0;border-end-start-radius:0}.handsontable.ht-wrapper.htPagination .htCore tbody tr:last-child td:first-child,.handsontable.ht-wrapper.htPagination .htCore tbody tr:last-child th:first-child,.handsontable.ht-wrapper.htPagination .htCore thead tr:last-child th:first-child{border-end-start-radius:0!important}.handsontable.ht-wrapper.htPagination .htCore tbody tr:last-child td:last-child,.handsontable.ht-wrapper.htPagination .htCore tbody tr:last-child th:last-child,.handsontable.ht-wrapper.htPagination .htCore thead tr:last-child th:last-child{border-end-end-radius:0!important}.ht-loading__icon-svg{animation:ht-loading-spin 1s linear infinite;color:var(--ht-accent-color);display:block;height:var(--ht-icon-size);transform-origin:50% 50%;width:var(--ht-icon-size)}.ht-loading__content{align-items:center;display:flex;gap:calc(var(--ht-gap-size)*2)}.ht-loading__title{font-size:var(--ht-font-size);font-weight:var(--ht-font-weight);line-height:var(--ht-line-height);margin:0}.ht-loading__description{color:var(--ht-foreground-secondary-color);font-size:var(--ht-font-size-small);font-weight:var(--ht-font-weight);line-height:var(--ht-line-height-small);margin:0}@keyframes ht-loading-spin{to{transform:rotate(1turn)}}/*!
* Copyright (c) HANDSONCODE sp. z o. o.
*
* HANDSONTABLE is a software distributed by HANDSONCODE sp. z o. o., a Polish corporation based in
* Gdynia, Poland, at Aleja Zwyciestwa 96-98, registered by the District Court in Gdansk under number
* 538651, EU tax ID number: PL5862294002, share capital: PLN 62,800.00.
*
* This software is protected by applicable copyright laws, including international treaties, and dual-
* licensed - depending on whether your use for commercial purposes, meaning intended for or
* resulting in commercial advantage or monetary compensation, or not.
*
* If your use is strictly personal or solely for evaluation purposes, meaning for the purposes of testing
* the suitability, performance, and usefulness of this software outside the production environment,
* you agree to be bound by the terms included in the "handsontable-non-commercial-license.pdf" file.
*
* Your use of this software for commercial purposes is subject to the terms included in an applicable
* license agreement.
*
* In any case, you must not make any such use of this software as to develop software which may be
* considered competitive with this software.
*
* UNLESS EXPRESSLY AGREED OTHERWISE, HANDSONCODE PROVIDES THIS SOFTWARE ON AN "AS IS"
* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, AND IN NO EVENT AND UNDER NO
* LEGAL THEORY, SHALL HANDSONCODE BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY DIRECT,
* INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
* USE OR INABILITY TO USE THIS SOFTWARE.
*
* Version: 16.1.1
* Release date: 23/09/2025 (built at 23/09/2025 14:17:24)
*/.ht-theme-main,.ht-theme-main-dark,.ht-theme-main-dark-auto{--ht-font-size:14px;--ht-font-size-small:12px;--ht-line-height:20px;--ht-line-height-small:18px;--ht-font-weight:400;--ht-letter-spacing:0;--ht-gap-size:4px;--ht-icon-size:16px;--ht-table-transition:0.15s;--ht-border-color:#e7e7e9;--ht-accent-color:#1a42e8;--ht-foreground-color:#222;--ht-foreground-secondary-color:#68696c;--ht-background-color:#fff;--ht-placeholder-color:#a3a3a3;--ht-read-only-color:#68696c;--ht-disabled-color:#a3a3a3;--ht-shadow-color:rgba(34,34,34,.08);--ht-shadow-x:0;--ht-shadow-y:8px;--ht-shadow-blur:16px;--ht-cell-horizontal-border-color:#e7e7e9;--ht-cell-vertical-border-color:#e7e7e9;--ht-wrapper-border-width:0;--ht-wrapper-border-radius:4px;--ht-wrapper-border-color:#e7e7e9;--ht-row-header-odd-background-color:#f7f7f9;--ht-row-header-even-background-color:#f7f7f9;--ht-row-cell-odd-background-color:hsla(0,0%,100%,0);--ht-row-cell-even-background-color:hsla(0,0%,100%,0);--ht-cell-horizontal-padding:8px;--ht-cell-vertical-padding:4px;--ht-cell-editor-border-width:2px;--ht-cell-editor-border-color:#1a42e8;--ht-cell-editor-foreground-color:#0f0f10;--ht-cell-editor-background-color:#fff;--ht-cell-editor-shadow-blur-radius:0;--ht-cell-editor-shadow-color:#1a42e8;--ht-cell-success-background-color:rgba(55,188,108,.2);--ht-cell-error-background-color:rgba(250,77,50,.2);--ht-cell-read-only-background-color:rgba(34,34,34,.04);--ht-cell-selection-border-color:#1a42e8;--ht-cell-selection-background-color:#5371ee;--ht-cell-autofill-size:6px;--ht-cell-autofill-border-width:1px;--ht-cell-autofill-border-radius:4px;--ht-cell-autofill-border-color:#fff;--ht-cell-autofill-background-color:#1a42e8;--ht-cell-autofill-fill-border-color:#222;--ht-cell-mobile-handle-size:12px;--ht-cell-mobile-handle-border-width:1px;--ht-cell-mobile-handle-border-radius:6px;--ht-cell-mobile-handle-border-color:#1a42e8;--ht-cell-mobile-handle-background-color:rgba(26,66,232,.4);--ht-resize-indicator-color:rgba(34,34,34,.4);--ht-move-backlight-color:rgba(34,34,34,.08);--ht-move-indicator-color:#1a42e8;--ht-hidden-indicator-color:rgba(34,34,34,.4);--ht-scrollbar-border-radius:8px;--ht-scrollbar-track-color:#f7f7f9;--ht-scrollbar-thumb-color:#a3a3a3;--ht-header-font-weight:400;--ht-header-foreground-color:#222;--ht-header-background-color:#f7f7f9;--ht-header-highlighted-shadow-size:0;--ht-header-highlighted-foreground-color:#0f0f10;--ht-header-highlighted-background-color:#ebebed;--ht-header-active-border-color:#2e56fc;--ht-header-active-foreground-color:#fff;--ht-header-active-background-color:#1a42e8;--ht-header-filter-background-color:rgba(55,188,108,.2);--ht-header-row-foreground-color:#222;--ht-header-row-background-color:#f7f7f9;--ht-header-row-highlighted-foreground-color:#0f0f10;--ht-header-row-highlighted-background-color:#ebebed;--ht-header-row-active-foreground-color:#fff;--ht-header-row-active-background-color:#1a42e8;--ht-checkbox-size:16px;--ht-checkbox-border-radius:4px;--ht-checkbox-border-color:#d1d1d5;--ht-checkbox-background-color:#fff;--ht-checkbox-icon-color:hsla(0,0%,100%,0);--ht-checkbox-focus-border-color:#d1d1d5;--ht-checkbox-focus-background-color:#fff;--ht-checkbox-focus-icon-color:hsla(0,0%,100%,0);--ht-checkbox-focus-ring-color:#1a42e8;--ht-checkbox-disabled-border-color:#e7e7e9;--ht-checkbox-disabled-background-color:#d1d1d5;--ht-checkbox-disabled-icon-color:hsla(0,0%,100%,0);--ht-checkbox-checked-border-color:#2e56fc;--ht-checkbox-checked-background-color:#1a42e8;--ht-checkbox-checked-icon-color:#fff;--ht-checkbox-checked-focus-border-color:#fff;--ht-checkbox-checked-focus-background-color:#1a42e8;--ht-checkbox-checked-focus-icon-color:#fff;--ht-checkbox-checked-disabled-border-color:#e7e7e9;--ht-checkbox-checked-disabled-background-color:#d1d1d5;--ht-checkbox-checked-disabled-icon-color:#a3a3a3;--ht-checkbox-indeterminate-border-color:#2e56fc;--ht-checkbox-indeterminate-background-color:#1a42e8;--ht-checkbox-indeterminate-icon-color:#fff;--ht-checkbox-indeterminate-focus-border-color:#fff;--ht-checkbox-indeterminate-focus-background-color:#1a42e8;--ht-checkbox-indeterminate-focus-icon-color:#fff;--ht-checkbox-indeterminate-disabled-border-color:#e7e7e9;--ht-checkbox-indeterminate-disabled-background-color:#d1d1d5;--ht-checkbox-indeterminate-disabled-icon-color:#aeaeae;--ht-radio-size:16px;--ht-radio-border-color:#d1d1d5;--ht-radio-background-color:#fff;--ht-radio-icon-color:hsla(0,0%,100%,0);--ht-radio-focus-border-color:#e7e7e9;--ht-radio-focus-background-color:#fff;--ht-radio-focus-icon-color:hsla(0,0%,100%,0);--ht-radio-focus-ring-color:#1a42e8;--ht-radio-disabled-border-color:#e7e7e9;--ht-radio-disabled-background-color:#d1d1d5;--ht-radio-disabled-icon-color:hsla(0,0%,100%,0);--ht-radio-checked-border-color:#1a42e8;--ht-radio-checked-background-color:#fff;--ht-radio-checked-icon-color:#1a42e8;--ht-radio-checked-focus-border-color:#2e56fc;--ht-radio-checked-focus-background-color:#fff;--ht-radio-checked-focus-icon-color:#2e56fc;--ht-radio-checked-disabled-border-color:#e7e7e9;--ht-radio-checked-disabled-background-color:#d1d1d5;--ht-radio-checked-disabled-icon-color:#a3a3a3;--ht-icon-button-border-radius:2px;--ht-icon-button-large-border-radius:4px;--ht-icon-button-large-padding:4px;--ht-icon-button-border-color:#f7f7f9;--ht-icon-button-background-color:#f7f7f9;--ht-icon-button-icon-color:rgba(34,34,34,.4);--ht-icon-button-hover-border-color:#e7e7e9;--ht-icon-button-hover-background-color:#e7e7e9;--ht-icon-button-hover-icon-color:rgba(34,34,34,.4);--ht-icon-button-active-border-color:#1a42e8;--ht-icon-button-active-background-color:#1a42e8;--ht-icon-button-active-icon-color:#fff;--ht-icon-button-active-hover-border-color:#2e56fc;--ht-icon-button-active-hover-background-color:#2e56fc;--ht-icon-button-active-hover-icon-color:#fff;--ht-collapse-button-border-radius:4px;--ht-collapse-button-open-border-color:#d1d1d5;--ht-collapse-button-open-background-color:#fff;--ht-collapse-button-open-icon-color:#68696c;--ht-collapse-button-open-icon-active-color:#68696c;--ht-collapse-button-open-hover-border-color:#d1d1d5;--ht-collapse-button-open-hover-background-color:#f7f7f9;--ht-collapse-button-open-hover-icon-color:#68696c;--ht-collapse-button-open-hover-icon-active-color:#68696c;--ht-collapse-button-close-border-color:#d1d1d5;--ht-collapse-button-close-background-color:#ebebed;--ht-collapse-button-close-icon-color:#68696c;--ht-collapse-button-close-icon-active-color:#68696c;--ht-collapse-button-close-hover-border-color:#d1d1d5;--ht-collapse-button-close-hover-background-color:#ebebed;--ht-collapse-button-close-hover-icon-color:#68696c;--ht-collapse-button-close-hover-icon-active-color:#68696c;--ht-button-border-radius:4px;--ht-button-horizontal-padding:12px;--ht-button-vertical-padding:6px;--ht-primary-button-border-color:hsla(0,0%,100%,0);--ht-primary-button-foreground-color:#fff;--ht-primary-button-background-color:#1a42e8;--ht-primary-button-disabled-border-color:hsla(0,0%,100%,0);--ht-primary-button-disabled-foreground-color:#a3a3a3;--ht-primary-button-disabled-background-color:#ebebed;--ht-primary-button-hover-border-color:hsla(0,0%,100%,0);--ht-primary-button-hover-foreground-color:#fff;--ht-primary-button-hover-background-color:#1535bc;--ht-primary-button-focus-border-color:#fff;--ht-primary-button-focus-foreground-color:#fff;--ht-primary-button-focus-background-color:#1a42e8;--ht-secondary-button-border-color:#e7e7e9;--ht-secondary-button-foreground-color:#222;--ht-secondary-button-background-color:#fff;--ht-secondary-button-disabled-border-color:#e7e7e9;--ht-secondary-button-disabled-foreground-color:#a3a3a3;--ht-secondary-button-disabled-background-color:#ebebed;--ht-secondary-button-hover-border-color:#e7e7e9;--ht-secondary-button-hover-foreground-color:#222;--ht-secondary-button-hover-background-color:#e7e7e9;--ht-secondary-button-focus-border-color:#e7e7e9;--ht-secondary-button-focus-foreground-color:#222;--ht-secondary-button-focus-background-color:#fff;--ht-comments-textarea-horizontal-padding:8px;--ht-comments-textarea-vertical-padding:4px;--ht-comments-textarea-border-width:1px;--ht-comments-textarea-border-color:hsla(0,0%,100%,0);--ht-comments-textarea-foreground-color:#222;--ht-comments-textarea-background-color:#f7f7f9;--ht-comments-textarea-focus-border-width:1px;--ht-comments-textarea-focus-border-color:#1a42e8;--ht-comments-textarea-focus-foreground-color:#222;--ht-comments-textarea-focus-background-color:#fff;--ht-comments-indicator-size:6px;--ht-comments-indicator-color:#1a42e8;--ht-license-horizontal-padding:16px;--ht-license-vertical-padding:8px;--ht-license-foreground-color:#222;--ht-license-background-color:#f7f7f9;--ht-link-color:#1a42e8;--ht-link-hover-color:#5371ee;--ht-input-border-width:1px;--ht-input-border-radius:4px;--ht-input-horizontal-padding:12px;--ht-input-vertical-padding:6px;--ht-input-border-color:#e7e7e9;--ht-input-foreground-color:#222;--ht-input-background-color:#f7f7f9;--ht-input-hover-border-color:#e7e7e9;--ht-input-hover-foreground-color:#222;--ht-input-hover-background-color:#fff;--ht-input-disabled-border-color:#e7e7e9;--ht-input-disabled-foreground-color:#a3a3a3;--ht-input-disabled-background-color:#d1d1d5;--ht-input-focus-border-color:#1a42e8;--ht-input-focus-foreground-color:#222;--ht-input-focus-background-color:#fff;--ht-menu-border-width:1px;--ht-menu-border-radius:4px;--ht-menu-horizontal-padding:0;--ht-menu-vertical-padding:8px;--ht-menu-item-horizontal-padding:12px;--ht-menu-item-vertical-padding:4px;--ht-menu-border-color:#e7e7e9;--ht-menu-shadow-x:0;--ht-menu-shadow-y:8px;--ht-menu-shadow-blur:16px;--ht-menu-shadow-color:rgba(34,34,34,.08);--ht-menu-item-hover-color:rgba(34,34,34,.04);--ht-menu-item-active-color:rgba(34,34,34,.08);--ht-dialog-semi-transparent-background-color:hsla(0,0%,100%,.8);--ht-dialog-solid-background-color:#fff;--ht-dialog-content-padding-horizontal:8px;--ht-dialog-content-padding-vertical:8px;--ht-dialog-content-border-radius:8px;--ht-dialog-content-background-color:#f7f7f9;--ht-pagination-bar-foreground-color:#222;--ht-pagination-bar-background-color:#f7f7f9;--ht-pagination-bar-horizontal-padding:16px;--ht-pagination-bar-vertical-padding:8px}.ht-theme-main-dark{--ht-border-color:#313132;--ht-accent-color:#476af7;--ht-foreground-color:#c7c7c7;--ht-foreground-secondary-color:#a3a3a3;--ht-background-color:#050506;--ht-placeholder-color:#68696c;--ht-read-only-color:#a3a3a3;--ht-disabled-color:#68696c;--ht-shadow-color:rgba(0,0,0,.8);--ht-cell-horizontal-border-color:#313132;--ht-cell-vertical-border-color:#313132;--ht-wrapper-border-color:#313132;--ht-row-header-odd-background-color:#1e1e1f;--ht-row-header-even-background-color:#1e1e1f;--ht-row-cell-odd-background-color:transparent;--ht-row-cell-even-background-color:transparent;--ht-cell-editor-border-color:#476af7;--ht-cell-editor-foreground-color:#fff;--ht-cell-editor-background-color:#050506;--ht-cell-editor-shadow-color:#476af7;--ht-cell-success-background-color:rgba(66,190,101,.3);--ht-cell-error-background-color:rgba(255,42,52,.3);--ht-cell-read-only-background-color:hsla(0,0%,78%,.12);--ht-cell-selection-border-color:#476af7;--ht-cell-selection-background-color:#2e56fc;--ht-cell-autofill-border-color:#050506;--ht-cell-autofill-background-color:#476af7;--ht-cell-autofill-fill-border-color:#c7c7c7;--ht-cell-mobile-handle-border-color:#476af7;--ht-cell-mobile-handle-background-color:rgba(71,106,247,.4);--ht-resize-indicator-color:hsla(0,0%,78%,.4);--ht-move-backlight-color:hsla(0,0%,78%,.16);--ht-move-indicator-color:#476af7;--ht-hidden-indicator-color:hsla(0,0%,78%,.4);--ht-scrollbar-track-color:#1e1e1f;--ht-scrollbar-thumb-color:#68696c;--ht-header-foreground-color:#c7c7c7;--ht-header-background-color:#1e1e1f;--ht-header-highlighted-foreground-color:#fff;--ht-header-highlighted-background-color:#282829;--ht-header-active-border-color:#5371ee;--ht-header-active-foreground-color:#050506;--ht-header-active-background-color:#476af7;--ht-header-filter-background-color:rgba(66,190,101,.3);--ht-header-row-foreground-color:#c7c7c7;--ht-header-row-background-color:#1e1e1f;--ht-header-row-highlighted-foreground-color:#fff;--ht-header-row-highlighted-background-color:#282829;--ht-header-row-active-foreground-color:#050506;--ht-header-row-active-background-color:#476af7;--ht-checkbox-border-color:#404144;--ht-checkbox-background-color:#050506;--ht-checkbox-icon-color:transparent;--ht-checkbox-focus-border-color:#404144;--ht-checkbox-focus-background-color:#050506;--ht-checkbox-focus-icon-color:transparent;--ht-checkbox-focus-ring-color:#476af7;--ht-checkbox-disabled-border-color:#313132;--ht-checkbox-disabled-background-color:#404144;--ht-checkbox-disabled-icon-color:transparent;--ht-checkbox-checked-border-color:#5371ee;--ht-checkbox-checked-background-color:#476af7;--ht-checkbox-checked-icon-color:#050506;--ht-checkbox-checked-focus-border-color:#050506;--ht-checkbox-checked-focus-background-color:#476af7;--ht-checkbox-checked-focus-icon-color:#050506;--ht-checkbox-checked-disabled-border-color:#313132;--ht-checkbox-checked-disabled-background-color:#404144;--ht-checkbox-checked-disabled-icon-color:#68696c;--ht-checkbox-indeterminate-border-color:#5371ee;--ht-checkbox-indeterminate-background-color:#476af7;--ht-checkbox-indeterminate-icon-color:#050506;--ht-checkbox-indeterminate-focus-border-color:#050506;--ht-checkbox-indeterminate-focus-background-color:#476af7;--ht-checkbox-indeterminate-focus-icon-color:#050506;--ht-checkbox-indeterminate-disabled-border-color:#313132;--ht-checkbox-indeterminate-disabled-background-color:#404144;--ht-checkbox-indeterminate-disabled-icon-color:#727272;--ht-radio-border-color:#404144;--ht-radio-background-color:#050506;--ht-radio-icon-color:transparent;--ht-radio-focus-border-color:#313132;--ht-radio-focus-background-color:#050506;--ht-radio-focus-icon-color:transparent;--ht-radio-focus-ring-color:#476af7;--ht-radio-disabled-border-color:#313132;--ht-radio-disabled-background-color:#404144;--ht-radio-disabled-icon-color:transparent;--ht-radio-checked-border-color:#476af7;--ht-radio-checked-background-color:#050506;--ht-radio-checked-icon-color:#476af7;--ht-radio-checked-focus-border-color:#5371ee;--ht-radio-checked-focus-background-color:#050506;--ht-radio-checked-focus-icon-color:#5371ee;--ht-radio-checked-disabled-border-color:#313132;--ht-radio-checked-disabled-background-color:#404144;--ht-radio-checked-disabled-icon-color:#68696c;--ht-icon-button-border-color:#1e1e1f;--ht-icon-button-background-color:#1e1e1f;--ht-icon-button-icon-color:hsla(0,0%,78%,.4);--ht-icon-button-hover-border-color:#313132;--ht-icon-button-hover-background-color:#313132;--ht-icon-button-hover-icon-color:hsla(0,0%,78%,.4);--ht-icon-button-active-border-color:#476af7;--ht-icon-button-active-background-color:#476af7;--ht-icon-button-active-icon-color:#050506;--ht-icon-button-active-hover-border-color:#5371ee;--ht-icon-button-active-hover-background-color:#5371ee;--ht-icon-button-active-hover-icon-color:#050506;--ht-collapse-button-open-border-color:#404144;--ht-collapse-button-open-background-color:#050506;--ht-collapse-button-open-icon-color:#a3a3a3;--ht-collapse-button-open-icon-active-color:#a3a3a3;--ht-collapse-button-open-hover-border-color:#404144;--ht-collapse-button-open-hover-background-color:#1e1e1f;--ht-collapse-button-open-hover-icon-color:#a3a3a3;--ht-collapse-button-open-hover-icon-active-color:#a3a3a3;--ht-collapse-button-close-border-color:#404144;--ht-collapse-button-close-background-color:#282829;--ht-collapse-button-close-icon-color:#a3a3a3;--ht-collapse-button-close-icon-active-color:#a3a3a3;--ht-collapse-button-close-hover-border-color:#404144;--ht-collapse-button-close-hover-background-color:#282829;--ht-collapse-button-close-hover-icon-color:#a3a3a3;--ht-collapse-button-close-hover-icon-active-color:#a3a3a3;--ht-primary-button-border-color:transparent;--ht-primary-button-foreground-color:#050506;--ht-primary-button-background-color:#476af7;--ht-primary-button-disabled-border-color:transparent;--ht-primary-button-disabled-foreground-color:#68696c;--ht-primary-button-disabled-background-color:#282829;--ht-primary-button-hover-border-color:transparent;--ht-primary-button-hover-foreground-color:#050506;--ht-primary-button-hover-background-color:#6180ff;--ht-primary-button-focus-border-color:#050506;--ht-primary-button-focus-foreground-color:#050506;--ht-primary-button-focus-background-color:#476af7;--ht-secondary-button-border-color:#313132;--ht-secondary-button-foreground-color:#c7c7c7;--ht-secondary-button-background-color:#050506;--ht-secondary-button-disabled-border-color:#313132;--ht-secondary-button-disabled-foreground-color:#68696c;--ht-secondary-button-disabled-background-color:#282829;--ht-secondary-button-hover-border-color:#313132;--ht-secondary-button-hover-foreground-color:#c7c7c7;--ht-secondary-button-hover-background-color:#313132;--ht-secondary-button-focus-border-color:#313132;--ht-secondary-button-focus-foreground-color:#c7c7c7;--ht-secondary-button-focus-background-color:#050506;--ht-comments-textarea-border-color:transparent;--ht-comments-textarea-foreground-color:#c7c7c7;--ht-comments-textarea-background-color:#1e1e1f;--ht-comments-textarea-focus-border-color:#476af7;--ht-comments-textarea-focus-foreground-color:#c7c7c7;--ht-comments-textarea-focus-background-color:#050506;--ht-comments-indicator-color:#476af7;--ht-license-foreground-color:#c7c7c7;--ht-license-background-color:#1e1e1f;--ht-link-color:#5371ee;--ht-link-hover-color:#6180ff;--ht-input-border-color:#313132;--ht-input-foreground-color:#c7c7c7;--ht-input-background-color:#1e1e1f;--ht-input-hover-border-color:#313132;--ht-input-hover-foreground-color:#c7c7c7;--ht-input-hover-background-color:#050506;--ht-input-disabled-border-color:#313132;--ht-input-disabled-foreground-color:#68696c;--ht-input-disabled-background-color:#404144;--ht-input-focus-border-color:#476af7;--ht-input-focus-foreground-color:#c7c7c7;--ht-input-focus-background-color:#050506;--ht-menu-border-color:#313132;--ht-menu-shadow-color:rgba(0,0,0,.8);--ht-menu-item-hover-color:hsla(0,0%,78%,.12);--ht-menu-item-active-color:hsla(0,0%,78%,.16);--ht-dialog-semi-transparent-background-color:rgba(0,0,0,.8);--ht-dialog-solid-background-color:#050506;--ht-dialog-content-background-color:#1e1e1f;--ht-pagination-bar-foreground-color:#c7c7c7;--ht-pagination-bar-background-color:#1e1e1f}@media(prefers-color-scheme:dark){.ht-theme-main-dark-auto{--ht-border-color:#313132;--ht-accent-color:#476af7;--ht-foreground-color:#c7c7c7;--ht-foreground-secondary-color:#a3a3a3;--ht-background-color:#050506;--ht-placeholder-color:#68696c;--ht-read-only-color:#a3a3a3;--ht-disabled-color:#68696c;--ht-shadow-color:rgba(0,0,0,.8);--ht-cell-horizontal-border-color:#313132;--ht-cell-vertical-border-color:#313132;--ht-wrapper-border-color:#313132;--ht-row-header-odd-background-color:#1e1e1f;--ht-row-header-even-background-color:#1e1e1f;--ht-row-cell-odd-background-color:transparent;--ht-row-cell-even-background-color:transparent;--ht-cell-editor-border-color:#476af7;--ht-cell-editor-foreground-color:#fff;--ht-cell-editor-background-color:#050506;--ht-cell-editor-shadow-color:#476af7;--ht-cell-success-background-color:rgba(66,190,101,.3);--ht-cell-error-background-color:rgba(255,42,52,.3);--ht-cell-read-only-background-color:hsla(0,0%,78%,.12);--ht-cell-selection-border-color:#476af7;--ht-cell-selection-background-color:#2e56fc;--ht-cell-autofill-border-color:#050506;--ht-cell-autofill-background-color:#476af7;--ht-cell-autofill-fill-border-color:#c7c7c7;--ht-cell-mobile-handle-border-color:#476af7;--ht-cell-mobile-handle-background-color:rgba(71,106,247,.4);--ht-resize-indicator-color:hsla(0,0%,78%,.4);--ht-move-backlight-color:hsla(0,0%,78%,.16);--ht-move-indicator-color:#476af7;--ht-hidden-indicator-color:hsla(0,0%,78%,.4);--ht-scrollbar-track-color:#1e1e1f;--ht-scrollbar-thumb-color:#68696c;--ht-header-foreground-color:#c7c7c7;--ht-header-background-color:#1e1e1f;--ht-header-highlighted-foreground-color:#fff;--ht-header-highlighted-background-color:#282829;--ht-header-active-border-color:#5371ee;--ht-header-active-foreground-color:#050506;--ht-header-active-background-color:#476af7;--ht-header-filter-background-color:rgba(66,190,101,.3);--ht-header-row-foreground-color:#c7c7c7;--ht-header-row-background-color:#1e1e1f;--ht-header-row-highlighted-foreground-color:#fff;--ht-header-row-highlighted-background-color:#282829;--ht-header-row-active-foreground-color:#050506;--ht-header-row-active-background-color:#476af7;--ht-checkbox-border-color:#404144;--ht-checkbox-background-color:#050506;--ht-checkbox-icon-color:transparent;--ht-checkbox-focus-border-color:#404144;--ht-checkbox-focus-background-color:#050506;--ht-checkbox-focus-icon-color:transparent;--ht-checkbox-focus-ring-color:#476af7;--ht-checkbox-disabled-border-color:#313132;--ht-checkbox-disabled-background-color:#404144;--ht-checkbox-disabled-icon-color:transparent;--ht-checkbox-checked-border-color:#5371ee;--ht-checkbox-checked-background-color:#476af7;--ht-checkbox-checked-icon-color:#050506;--ht-checkbox-checked-focus-border-color:#050506;--ht-checkbox-checked-focus-background-color:#476af7;--ht-checkbox-checked-focus-icon-color:#050506;--ht-checkbox-checked-disabled-border-color:#313132;--ht-checkbox-checked-disabled-background-color:#404144;--ht-checkbox-checked-disabled-icon-color:#68696c;--ht-checkbox-indeterminate-border-color:#5371ee;--ht-checkbox-indeterminate-background-color:#476af7;--ht-checkbox-indeterminate-icon-color:#050506;--ht-checkbox-indeterminate-focus-border-color:#050506;--ht-checkbox-indeterminate-focus-background-color:#476af7;--ht-checkbox-indeterminate-focus-icon-color:#050506;--ht-checkbox-indeterminate-disabled-border-color:#313132;--ht-checkbox-indeterminate-disabled-background-color:#404144;--ht-checkbox-indeterminate-disabled-icon-color:#727272;--ht-radio-border-color:#404144;--ht-radio-background-color:#050506;--ht-radio-icon-color:transparent;--ht-radio-focus-border-color:#313132;--ht-radio-focus-background-color:#050506;--ht-radio-focus-icon-color:transparent;--ht-radio-focus-ring-color:#476af7;--ht-radio-disabled-border-color:#313132;--ht-radio-disabled-background-color:#404144;--ht-radio-disabled-icon-color:transparent;--ht-radio-checked-border-color:#476af7;--ht-radio-checked-background-color:#050506;--ht-radio-checked-icon-color:#476af7;--ht-radio-checked-focus-border-color:#5371ee;--ht-radio-checked-focus-background-color:#050506;--ht-radio-checked-focus-icon-color:#5371ee;--ht-radio-checked-disabled-border-color:#313132;--ht-radio-checked-disabled-background-color:#404144;--ht-radio-checked-disabled-icon-color:#68696c;--ht-icon-button-border-color:#1e1e1f;--ht-icon-button-background-color:#1e1e1f;--ht-icon-button-icon-color:hsla(0,0%,78%,.4);--ht-icon-button-hover-border-color:#313132;--ht-icon-button-hover-background-color:#313132;--ht-icon-button-hover-icon-color:hsla(0,0%,78%,.4);--ht-icon-button-active-border-color:#476af7;--ht-icon-button-active-background-color:#476af7;--ht-icon-button-active-icon-color:#050506;--ht-icon-button-active-hover-border-color:#5371ee;--ht-icon-button-active-hover-background-color:#5371ee;--ht-icon-button-active-hover-icon-color:#050506;--ht-collapse-button-open-border-color:#404144;--ht-collapse-button-open-background-color:#050506;--ht-collapse-button-open-icon-color:#a3a3a3;--ht-collapse-button-open-icon-active-color:#a3a3a3;--ht-collapse-button-open-hover-border-color:#404144;--ht-collapse-button-open-hover-background-color:#1e1e1f;--ht-collapse-button-open-hover-icon-color:#a3a3a3;--ht-collapse-button-open-hover-icon-active-color:#a3a3a3;--ht-collapse-button-close-border-color:#404144;--ht-collapse-button-close-background-color:#282829;--ht-collapse-button-close-icon-color:#a3a3a3;--ht-collapse-button-close-icon-active-color:#a3a3a3;--ht-collapse-button-close-hover-border-color:#404144;--ht-collapse-button-close-hover-background-color:#282829;--ht-collapse-button-close-hover-icon-color:#a3a3a3;--ht-collapse-button-close-hover-icon-active-color:#a3a3a3;--ht-primary-button-border-color:transparent;--ht-primary-button-foreground-color:#050506;--ht-primary-button-background-color:#476af7;--ht-primary-button-disabled-border-color:transparent;--ht-primary-button-disabled-foreground-color:#68696c;--ht-primary-button-disabled-background-color:#282829;--ht-primary-button-hover-border-color:transparent;--ht-primary-button-hover-foreground-color:#050506;--ht-primary-button-hover-background-color:#6180ff;--ht-primary-button-focus-border-color:#050506;--ht-primary-button-focus-foreground-color:#050506;--ht-primary-button-focus-background-color:#476af7;--ht-secondary-button-border-color:#313132;--ht-secondary-button-foreground-color:#c7c7c7;--ht-secondary-button-background-color:#050506;--ht-secondary-button-disabled-border-color:#313132;--ht-secondary-button-disabled-foreground-color:#68696c;--ht-secondary-button-disabled-background-color:#282829;--ht-secondary-button-hover-border-color:#313132;--ht-secondary-button-hover-foreground-color:#c7c7c7;--ht-secondary-button-hover-background-color:#313132;--ht-secondary-button-focus-border-color:#313132;--ht-secondary-button-focus-foreground-color:#c7c7c7;--ht-secondary-button-focus-background-color:#050506;--ht-comments-textarea-border-color:transparent;--ht-comments-textarea-foreground-color:#c7c7c7;--ht-comments-textarea-background-color:#1e1e1f;--ht-comments-textarea-focus-border-color:#476af7;--ht-comments-textarea-focus-foreground-color:#c7c7c7;--ht-comments-textarea-focus-background-color:#050506;--ht-comments-indicator-color:#476af7;--ht-license-foreground-color:#c7c7c7;--ht-license-background-color:#1e1e1f;--ht-link-color:#5371ee;--ht-link-hover-color:#6180ff;--ht-input-border-color:#313132;--ht-input-foreground-color:#c7c7c7;--ht-input-background-color:#1e1e1f;--ht-input-hover-border-color:#313132;--ht-input-hover-foreground-color:#c7c7c7;--ht-input-hover-background-color:#050506;--ht-input-disabled-border-color:#313132;--ht-input-disabled-foreground-color:#68696c;--ht-input-disabled-background-color:#404144;--ht-input-focus-border-color:#476af7;--ht-input-focus-foreground-color:#c7c7c7;--ht-input-focus-background-color:#050506;--ht-menu-border-color:#313132;--ht-menu-shadow-color:rgba(0,0,0,.8);--ht-menu-item-hover-color:hsla(0,0%,78%,.12);--ht-menu-item-active-color:hsla(0,0%,78%,.16);--ht-dialog-semi-transparent-background-color:rgba(0,0,0,.8);--ht-dialog-solid-background-color:#050506;--ht-dialog-content-background-color:#1e1e1f;--ht-pagination-bar-foreground-color:#c7c7c7;--ht-pagination-bar-background-color:#1e1e1f}}[class*=ht-theme-main] .htContextMenu table tbody tr td.htSubmenu .htItemWrapper:after,[class*=ht-theme-main] .htDropdownMenu table tbody tr td.htSubmenu .htItemWrapper:after,[class*=ht-theme-main] .htFiltersConditionsMenu table tbody tr td.htSubmenu .htItemWrapper:after,[class*=ht-theme-main] .pika-single .pika-next{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M6.646 10.94 9.94 7.645 6.646 4.354'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .pika-single .pika-prev{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M9.94 10.94 6.645 7.645 9.94 4.354'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .ht-page-size-section__select-wrapper:after{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M11.586 6 8.293 9.293 5 6' opacity='.6'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .changeType:before,[class*=ht-theme-main] .htAutocompleteArrow:after,[class*=ht-theme-main] .htUISelectCaption:after{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='currentColor' d='M11 6.667a.5.5 0 0 1 .392.811l-.038.042-3 3a.5.5 0 0 1-.66.042l-.047-.042-3-3-.042-.047-.027-.038-.027-.048-.008-.018-.014-.034-.016-.054-.005-.026-.005-.03-.002-.029v-.059l.003-.029.004-.03.005-.026.016-.054.014-.033.035-.066.032-.045.037-.04.047-.042.038-.027.048-.027.018-.009.034-.013.054-.016.026-.005.03-.005.029-.002z'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .columnSorting.sortAction.ascending:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M8 12.667V3.333m0 0L5.333 6M8 3.333 10.667 6'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .columnSorting.sortAction.descending:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M8 3.333v9.334m0 0L10.667 10M8 12.667 5.333 10'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .ht-page-navigation-section .ht-page-first:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m11.071 4.642-3.35 3.35 3.35 3.35M4.93 4.084v7.258'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] [dir=rtl] .ht-page-navigation-section .ht-page-first:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m4.93 4.642 3.35 3.35-3.35 3.35m6.141-7.258v7.258'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .ht-page-navigation-section .ht-page-prev:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M9.94 10.94 6.645 7.645 9.94 4.354'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .ht-page-navigation-section .ht-page-next:before,[class*=ht-theme-main] [dir=rtl] .ht-page-navigation-section .ht-page-prev:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M6.646 10.94 9.94 7.645 6.646 4.354'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] [dir=rtl] .ht-page-navigation-section .ht-page-next:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M9.94 10.94 6.645 7.645 9.94 4.354'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .ht-page-navigation-section .ht-page-last:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m4.93 4.642 3.35 3.35-3.35 3.35m6.141-7.258v7.258'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] [dir=rtl] .ht-page-navigation-section .ht-page-last:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m11.071 4.642-3.35 3.35 3.35 3.35M4.93 4.084v7.258'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .htContextMenu table tbody tr td .htItemWrapper span.selected:after,[class*=ht-theme-main] .htDropdownMenu table tbody tr td .htItemWrapper span.selected:after,[class*=ht-theme-main] .htFiltersConditionsMenu table tbody tr td .htItemWrapper span.selected:after{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m3.333 8 3.334 3.333 6.666-6.666'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .htCheckboxRendererInput{-webkit-appearance:none;-moz-appearance:none;appearance:none}[class*=ht-theme-main] .htCheckboxRendererInput:after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m5 8 2 2 4-4'/%3E%3C/svg%3E")}[class*=ht-theme-main] .htCheckboxRendererInput:after,[class*=ht-theme-main] th.beforeHiddenColumn:after{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] th.beforeHiddenColumn:after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Cpath fill='currentColor' d='m6.085 1.358.03-.003h.061l.03.003.032.004.027.006.056.016.035.014.069.037.047.034.042.038.043.049.028.04.028.05.01.018.013.035.017.057.005.027.005.031.003.03v6.28a.521.521 0 0 1-.845.409l-.043-.04-3.125-3.125a.52.52 0 0 1-.044-.687l.044-.05 3.125-3.124.048-.044.04-.028.05-.028.02-.009.034-.014.056-.016.028-.006z'/%3E%3C/svg%3E")}[class*=ht-theme-main] th.afterHiddenColumn:before{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Cpath fill='currentColor' d='M3.333 1.875c0-.444.514-.676.846-.408l.043.04 3.125 3.125a.52.52 0 0 1 .044.687l-.044.05-3.125 3.124-.049.043-.04.029-.05.028-.018.009-.035.014-.057.016-.027.005-.031.006-.03.002h-.062l-.03-.003-.031-.005-.027-.005-.056-.016-.035-.014-.069-.037-.047-.034-.042-.038-.043-.049-.028-.04-.029-.05-.008-.019-.014-.034-.017-.057-.005-.027-.006-.032-.002-.03z'/%3E%3C/svg%3E")}[class*=ht-theme-main] th.afterHiddenColumn:before,[class*=ht-theme-main] th.beforeHiddenRow:after{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] th.beforeHiddenRow:after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none'%3E%3Cpath fill='currentColor' d='M3.764 2.431a.333.333 0 0 1 .44-.028l.032.028 2 2 .027.031.018.026.018.032.006.012.009.022.01.036.004.018.003.02.002.019v.04l-.002.019-.003.02-.003.017-.011.036-.01.022-.022.044-.022.03-.024.027-.032.028-.025.018-.032.018-.012.006-.023.009-.036.01-.017.004-.02.003-.02.001L6 5H2a.334.334 0 0 1-.26-.541l.025-.028z'/%3E%3C/svg%3E")}[class*=ht-theme-main] th.afterHiddenRow:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none'%3E%3Cpath fill='currentColor' d='M6 3c.284 0 .432.329.26.541l-.024.028-2 2a.333.333 0 0 1-.44.028l-.032-.028-2-2-.027-.031-.018-.026L1.7 3.48l-.006-.012-.01-.022-.01-.036-.003-.018-.003-.02-.002-.019v-.04l.002-.019.003-.02.003-.017.01-.036.01-.022.023-.044.022-.03.024-.027.032-.028.025-.018.032-.018.012-.006.023-.009.036-.01.017-.004.02-.003.02-.001z'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .collapsibleIndicator:before,[class*=ht-theme-main] .ht_nestingButton:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M4.333 8h7.334'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .collapsibleIndicator.collapsed:before,[class*=ht-theme-main] .collapsibleIndicator.ht_nestingExpand:before,[class*=ht-theme-main] .ht_nestingButton.collapsed:before,[class*=ht-theme-main] .ht_nestingButton.ht_nestingExpand:before{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M7.5 11.667a.5.5 0 0 0 1 0V8.5h3.167a.5.5 0 0 0 0-1H8.5V4.333a.5.5 0 0 0-1 0V7.5H4.333a.5.5 0 0 0 0 1H7.5z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}[class*=ht-theme-main] .htUIRadio>input[type=radio]:after{background-color:currentColor;height:var(--ht-icon-size);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");-webkit-mask-size:contain;width:var(--ht-icon-size)}